Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Остановка при прокрутке сайта

Максим Топунов Профи (558), на голосовании 1 год назад
Необходимо сделать, чтобы при прокрутке сайта вниз, прокрутка останавливалась на определённом объекте. Чтобы спуститься ниже этого объекта, нужно снова начать прокрутку. Возможно ли это реализовать? JS, HTML, CSS
Голосование за лучший ответ
Professional Professional Мудрец (15912) 1 год назад
Да, вы можете это сделать с помощью JavaScript и CSS. Примерный подход может выглядеть следующим образом:

1. Настройте слушатель событий прокрутки на окно, чтобы отслеживать, когда пользователь прокручивает до определенного объекта.

2. Когда пользователь достигает этого объекта, измените CSS для этого объекта таким образом, чтобы он занимал все доступное пространство окна.

3. Затем добавьте внутри этого объекта еще одну прокрутку, чтобы пользователь мог прокрутить вниз для просмотра остального содержимого.

Вот пример кода:

HTML:

```html
<div id="main">
<div id="contentAbove"></div>
<div id="contentSticky">
<div id="innerContentSticky"></div>
</div>
<div id="contentBelow"></div>
</div>
```

CSS:

```css
#contentSticky {
position: sticky;
top: 0;
height: 100vh;
overflow-y: scroll;
}
```

JavaScript:

```javascript
var contentSticky = document.getElementById('contentSticky');
var innerContentSticky = document.getElementById('innerContentSticky');
var isScrolled = false;

window.addEventListener('scroll', function() {
if (window.pageYOffset >= contentSticky.offsetTop && !isScrolled) {
isScrolled = true;
innerContentSticky.scrollTop = 1; // Make a scroll to activate inner scroll
}
if (window.pageYOffset < contentSticky.offsetTop) {
isScrolled = false;
}
});

innerContentSticky.addEventListener('scroll', function() {
if (innerContentSticky.scrollTop === 0 && isScrolled) {
isScrolled = false;
}
});
```

В этом примере есть контент, который находится над и под нашим "застревающим" блоком. Этот "застревающий" блок будет занимать всё пространство окна, когда пользователь прокрутит до него. Для того, чтобы прокрутить его, мы используем внутреннюю прокрутку.

Пожалуйста, протестируйте этот код и убедитесь, что он удовлетворяет вашим требованиям. В зависимости от структуры вашего сайта и ваших конкретных потребностей, возможно, потребуются некоторые модификации.
AaacoB AaacМудрец (12958) 1 год назад
ну че? "протестировал", жертва егэ?
Абаев Абай, это даже не жертва егэ, это ответ из чатгпт.
Похожие вопросы