Блог

Главная - Вопросы по программированию - Остановите прокрутку тела до тех пор, пока div не начнет прокручиваться

Остановите прокрутку тела до тех пор, пока div не начнет прокручиваться

#javascript #scroll

Вопрос:

Я хочу, чтобы моя страница прокручивалась нормально, останавливалась и фиксировалась в определенной точке, затем прокручивала div, а после того, как div будет полностью прокручен, продолжайте прокручивать тело, как обычно.

Я пытался отключить прокрутку страницы и работать с событием wheel, добавляя верхнюю часть поля к своему контенту, но это не кажется хорошим решением.

Пример того, чего я хочу https://aimbulance.com/ilayaregeneration

Спасибо!

Ответ №1:

Ваш пример не блокирует прокрутку до div, а маскирует всю страницу и использует position: sticky для этого.

решение

Возможное решение состоит в том, чтобы сделать div, который вы хотите прокрутить, контейнером, в position: relative котором содержится маскирующий элемент position: absolute , покрывающий весь div и содержащий маску, которая будет position: sticky с top: 0 ним .

посмотрите на этот пример: https://codesandbox.io/s/scrolled-div-jqw7z

Комментарии:

1. Большое спасибо, это сработало так, как мне было нужно!

Ответ №2:

Используйте переполнение-y

 <!DOCTYPE html>
<html>

<head>
  <style>
    html {
      scroll-behavior: smooth;
    }

    #section1 {
      height: 600px;
      background-color: pink;
    }

    #section2 {
      height: 600px;
      background-color: yellow;
      display: flex;
      justify-content: center;
      /* this is the usage */
      overflow-y: auto;
    }

    #inner {
      /* this height is larger than the parent */
      height: 1200px;
      width: 33%;
      background: radial-gradient(circle, black, white);
      overflow-y: auto;
    }

    #section3 {
      height: 600px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="main" id="section1">
  </div>

  <div class="main" id="section2">
    <div id="inner"></div>
  </div>

  <div class="main" id="section3">
  </div>
</body>

</html>

Комментарии:

1. переполнение-y-это не то решение, которое мне нужно, потому что в этом случае у вас будет два независимых свитка, один для тела, а другой для div, если он завис. Мне нужен один общий свиток для тела и div

Метки: ,