CSS / JavaScript - Прокрутка оснастки, когда пользователь начинает прокрутку

Question

Я недавно нашел этот сайт , который использует привязку прокрутки. Я посмотрел на это и обнаружил, что CSS поддерживает это . Тем не менее, похоже, что привязка происходит после того, как пользователь прекращает прокрутку. То же самое относится и к ответу на этот вопрос .

Следующее, что я попробовал, было использование window.scrollTo и react-scroll, но оба они были не такими гладкими, как веб-сайт, на который я ссылался в качестве примера, поскольку пользователь все еще мог «бороться» с прокруткой, прокручивая в другом направлении.

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

Answer 1

Разработчик, на которого вы смотрели, использует этот скрипт js, если вы хотите, чтобы он имитировался точно https://alvarotrigo.com/fullPage/

Answer 2

Если вариант jQuery, это будет самое простое решение с лучшей совместимостью с браузером. Вы можете использовать прослушиватель событий «wheel» для определения направления прокрутки, а затем использовать jQuery animate для прокрутки окна до соответствующего элемента. Я привел пример, основанный на этом репозитории GitHub: https://github.com/epranka/sections-slider.

(function($) {
  var selector = ".section";
  var direction;
  var $slide;
  var offsetTop;
  var $slides = $(selector);
  var currentSlide = 0;
  var isAnimating = false;

  var stopAnimation = function() {
    setTimeout(function() {
      isAnimating = false;
    }, 300);
  };

  var bottomIsReached = function($elem) {
    var rect = $elem[0].getBoundingClientRect();
    return rect.bottom <= $(window).height();
  };

  var topIsReached = function($elem) {
    var rect = $elem[0].getBoundingClientRect();
    return rect.top >= 0;
  };

  document.addEventListener(
    "wheel",
    function(event) {
      var $currentSlide = $($slides[currentSlide]);

      if (isAnimating) {
        event.preventDefault();
        return;
      }

      direction = -event.deltaY;

      if (direction < 0) {
        // next
        if (currentSlide + 1 >= $slides.length) {
          return;
        }
        if (!bottomIsReached($currentSlide)) {
          return;
        }
        event.preventDefault();
        currentSlide++;
        $slide = $($slides[currentSlide]);
        offsetTop = $slide.offset().top;
        isAnimating = true;
        $("html, body").animate({
            scrollTop: offsetTop
          },
          1000,
          stopAnimation
        );
      } else {
        // back
        if (currentSlide - 1 < 0) {
          return;
        }
        if (!topIsReached($currentSlide)) {
          return;
        }
        event.preventDefault();
        currentSlide--;
        $slide = $($slides[currentSlide]);
        offsetTop = $slide.offset().top;
        isAnimating = true;
        $("html, body").animate({
            scrollTop: offsetTop
          },
          1000,
          stopAnimation
        );
      }
    }, {
      passive: false
    }
  );
})(jQuery);

.section {
  position: relative;
  display: flex;
  height: 100vh;
}

#section1 {
  background: blue;
}

#section2 {
  background: #ff8c42;
}

#section3 {
  background: #6699cc;
}

#section4 {
  background: #00b9ae;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section1" class="section"></div>
<div id="section2" class="section"></div>
<div id="section3" class="section"></div>
<div id="section4" class="section"></div>