Question

我有2个全屏大小的div元素。我希望它们像幻灯片一样，所以如果用户向下滚动一下它会滚动到第二个div，如果用户向上滚动它会向上滚动到顶部。

然而它不起作用。我无法向上滚动，但它可以向下滚动。我是jQuery的新手，详细的答案会很好。

var lastScrollTop = 0;
$(window).scroll(function(event) {
  var st = $(this).scrollTop();
  if (st > lastScrollTop) {
    $('html body').animate({
      scrollTop: $('#scrollHere').offset().top
    }, 1000);
  } else {
    $('html body').animate({
      scrollTop: 0
    }, 1000);
  }
  lastScrollTop = st;
});

* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100vh;
  background: tomato;
}
.blue {
  background: skyblue;
}

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="box blue"></div>
<div class="box" id="scrollHere"></div>

Answer 1

这比动画速度要快一些，让我说一个'罕见'的UI概念。覆盖默认滚动行为就像失去了对页面交互的基本控制。反正。

首先：如果您观看滚动并对其进行修改，则必须在已设置动画时取消任何其他动画。因此我添加了一个布尔变量（isScrolling）来处理这个问题。

第二：最好将滚动事件侦听器（滚动方向的检测）与交互分开（我使用了一个带有一点延迟的超时）。结果有效，但正如我之前提到的，感觉很奇怪。

var lastScrollTop = 0;
var isScrolling = false;
var timer = null;

// method to initialize and handle the scroll override
function triggerScroll(direction) {
    // do not proceed in case we have an active timer
    if (timer) {return;}
    // get target position
    var topPos = (direction === 'down') ? $('#scrollHere').offset().top : 0;
    // run this with a little delay
    timer = setTimeout(function() {
        $('html body').animate({
          scrollTop: topPos
        }, 1000, function() {
           // animation done - reset everything
           isScrolling = false;
           clearTimeout(timer);
           timer = false;
           lastScrollTop = $(window).scrollTop();
        });
    },50);
}

// your event listener - detects direction 
$(window).scroll(function(event) {
  // do not proceed if we already have a scroll event
  if(isScrolling) {return;}
  var st = $(this).scrollTop();
  if (st >= lastScrollTop) {
    // delegate to sep. function
    triggerScroll('down');
  } else {
    triggerScroll('up');
  }
  lastScrollTop = st;
  isScrolling = true;
});

如果你问我的意见 - 通过页面内的点击（锚导航或其他）触发这类动画更为常见，如果用户想要使用滚动条，让他在任何他想要的地方滚动（或可能在滚动完成后进行交互）。

按块滚动

1 个答案: