Как прокручивать конкретный блок с тегом Div?

Question

Авраам

html , javascript , css

Как прокручивать конкретный блок с тегом Div?

У меня есть идея и макет для реализации функционала на веб-странице. План такой: когда контейнер с классом "main-container" попадет в центр экрана, он должен зафиксироваться на этом месте. При прокрутке страницы должны прокручиваться только его содержимое. Как только содержимое контейнера прокрутится полностью, он снова станет подвижным, и страница будет продолжать скролиться дальше. <br/><br/> Ранее я пробовал использовать "overflow-y: scroll;" и "position: sticky;", но результаты не удовлетворили. Можете подсказать, как правильно реализовать этот функционал? <br/><br/><pre><code class="css">&lt;style&gt;
    .wrap{
      max-width: 750px;
      margin: 0 auto;
      font-size: 24px;
    }
    .block-1,
    .main-container{
      border: 1px solid #ccc;
      padding: 20px;
      margin: 20px 0;
    }
    .main-container {
      height: 400px;
      overflow-y: scroll;
      background-color: brown;
      color: #ccc;
    }
  &lt;/style&gt;</code></pre> <br/><pre><code class="html">&lt;div class="wrap"&gt;
    &lt;div class="block-1"&gt;
      Задача организации, в особенности же социально-экономическое развитие позволяет оценить значение направлений прогрессивного развития. Задача организации, в особенности же повышение уровня гражданского сознания создаёт предпосылки качественно новых шагов для дальнейших направлений развитая системы массового участия. Значимость этих проблем настолько очевидна, что консультация с профессионалами из IT обеспечивает широкому кругу специалистов участие в формировании ключевых компонентов планируемого обновления!
 
Не следует, однако, забывать о том, что социально-экономическое развитие обеспечивает широкому кругу специалистов участие в формировании форм воздействия? Разнообразный и богатый опыт рамки и место обучения кадро

27 декабря 2024 г. 6:43

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для реализации описанного вами функционала, можно использовать JavaScript в сочетании с CSS. Здесь мы будем отслеживать позицию контейнера `.main-container` на экране и корректировать его стиль в зависимости от положения при прокрутке.

Вот пример полной реализации:

### CSS
```css
<style>
    .wrap {
        max-width: 750px;
        margin: 0 auto;
        font-size: 24px;
    }
    .block-1,
    .main-container {
        border: 1px solid #ccc;
        padding: 20px;
        margin: 20px 0;
    }
    .main-container {
        height: 400px; /* Высота блока с прокруткой */
        overflow-y: auto; /* Прокрутка содержимого */
        background-color: brown;
        color: #ccc;
    }
    .fixed {
        position: fixed; /* Фиксируем элемент */
        top: 50%; /* Позиционируем по вертикали (центрируем) */
        transform: translateY(-50%); /* Центрируем относительно своей высоты */
    }
</style>
```

### HTML
```html
<div class="wrap">
    <div class="block-1">
        Задача организации, в особенности же социально-экономическое развитие позволяет оценить значение направлений прогрессивного развития. Задача организации, в особенности же повышение уровня гражданского сознания создаёт предпосылки качественно новых шагов для дальнейших направлений развитая системы массового участия.
        Не следует, однако, забывать о том, что социально-экономическое развитие обеспечивает широкому кругу специалистов участие в формировании форм воздействия? Разнообразный и богатый опыт рамки и место обучения кадров носят сетевой характер.
        <br/><br/>
        Содержимое блока 1.
    </div>
    <div class="main-container">
        <div style="height: 1000px;"> <!-- Долгое содержимое для прокрутки -->
            Много текста, который необходимо прокрутить. <br>
            Много текста, который необходимо прокрутить. <br>
            Много текста, который необходимо прокрутить. <br>
            Много текста, который необходимо прокрутить. <br>
            Много текста, который необходимо прокрутить. <br>
            Много текста, который необходимо прокрутить. <br>
            Много текста, который необходимо прокрутить. <br>
            Много текста, который необходимо прокрутить. <br>
            Много текста, который необходимо прокрутить. <br>
        </div>
    </div>
    <div class="block-1">
        Содержимое блока 2.
    </div>
</div>
```

### JavaScript
```javascript
<script>
    window.addEventListener('scroll', function() {
        const mainContainer = document.querySelector('.main-container');
        const rect = mainContainer.getBoundingClientRect();
        
        // Проверяем, попадает ли блок в центр экрана
        if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
            mainContainer.classList.add('fixed');
            mainContainer.scrollIntoView({ block: 'center', behavior: 'smooth' }); // Перемещаем блок в центр
        } else {
            mainContainer.classList.remove('fixed');
        }
    });

    // Дополнительное событие для удаления 'fixed' после прокрутки содержимого вниз
    const mainContainer = document.querySelector('.main-container');
    mainContainer.addEventListener('scroll', function() {
        if (mainContainer.scrollTop + mainContainer.clientHeight >= mainContainer.scrollHeight) {
            mainContainer.classList.remove('fixed');
        }
    });
</script>
```

### Объяснение кода:
1. **CSS**: Стиль фиксированного контейнера настроен через класс `.fixed`, который устанавливает `position: fixed` и вертикально центрирует его.
2. **HTML**: Подготовили контейнеры `block-1` и  `main-container` с большим содержимым для создания прокрутки.
3. **JavaScript**:
   - При прокрутке страницы проверяем, попадает ли `main-container` в центр экрана и, если да, фиксируем его.
   - Если все содержимое `main-container` прокручено, мы убираем фиксированное позиционирование.

Это решение должно полностью реализовать функционал, который вы описали.