Question

这方面的一个例子是Stellar.js的网站。唯一的问题是，我已经使用了视差库（ScrollMagic），并且不想用Stellar重做我的网站。我该怎么做？（jQuery是可以接受的。）

编辑：我忘了提到这些部分是整页的。

Answer 1

这可以让用户滚动，当他停止时，它会跳到下一个位置。

＆＃13;

scrollTo($(".start"));


$(document).on('mousewheel ', function(e) {

  //e.preventDefault(); /** optional, you might want to try it **/

  
  
  /** elements to bounce to: **/
  var $elements = $("div[data-scrollBolock]"); 
  
  /** get the next/previous element based on the scrolling direction: **/
  var $elementToScrollTo = $elements.eq(0);
  var scrollDirection = "down";
  if (e.originalEvent.wheelDelta >= 0) {
    scrollDirection = "up";
    $elements = $($elements.get().reverse());
  }

  $elements.each(function() {
    var scrollTop = $(window).scrollTop(),
      elementOffset = $(this).offset().top,
      distance = (elementOffset - scrollTop);
    if (scrollDirection === "down") {
      if (distance > 0) {
        $elementToScrollTo = $(this);
        return false;
      }
    } else {
      if (distance < 0) {
        $elementToScrollTo = $(this);
        return false;
      }
    }
  });

  
  /** scrollTo $elementToScrollTo but only if the user stopped scrolling **/
  clearTimeout($.data(this, 'scrollTimer'));
  $.data(this, 'scrollTimer', setTimeout(function() { //user stopped scrolling
    scrollTo($elementToScrollTo);
  }, 80));

});


function scrollTo($el) {
  $('html,body').animate({
    scrollTop: $($el).offset().top
  }, 500);
}

＆＃13;

div {
  height: 200px;
  width: 50%;
  border-bottom: 2px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div data-scrollBolock>1</div>

<div class="start" data-scrollBolock>2</div>

<div data-scrollBolock>3</div>

<div data-scrollBolock>4</div>

<div data-scrollBolock>5</div>

<div data-scrollBolock>6</div>

＆＃13;

Answer 2

首先，您需要添加scroll事件处理程序。滚动事件中使用setTimeout()可在页面滚动完成时运行代码。

var timer;
$(window).scroll(function(){
    clearInterval(timer)
    timer = setTimeout(function(){
        scrollToElement(this);
    }, 800);
});

当页面滚动完成0.8秒后，该函数被调用。在功能中，您需要获得窗口高度和滚动位置。然后选择页面中的所有section并使用each()获取它们的数据。在each()中，你需要获得元素的高度和位置。在最后一步中，如果条件的结果是正确的，则页面滚动到目标元素。

function scrollToElement(_this){
    var winHeight = $(_this).height();
    var scrollTop = $(_this).scrollTop();
    var winHeightHalf = winHeight / 2;    
    var winCenterScroll = scrollTop + winHeightHalf;

    $("section").each(function(){
        var elemHeight = $(this).height();
        var elementTop = $(this).position().top; 
        var elemBottomPos = elementTop + elemHeight; 

        if ((winCenterScroll > elementTop && elementTop > scrollTop) || 
            (scrollTop + winHeight > elemBottomPos && elemBottomPos > winCenterScroll))
            $("body, html").animate({scrollTop: elementTop}, "500");
    });
}

因为您无法在此处看到合适的结果，请在 jsfiddle

中查看

请注意：部分的高度必须等于或小于页面高度，且大于页面高度的一半。

如何强制/引导滚动到最近的元素？

2 个答案: