Question

我知道有很多类似的帖子，但我仍然没有得到我需要的代码。

基本上，我想在用户第一次向下滚动时进行演示。为此，我想阻止滚动的默认操作和（如果它向下滚动）将动画制作到下一个div。

window.scrolledToRed = false
window.scrolledToGreen = false

window.scrollTo = (to, guard ) =>
  $('html, body').animate({
    scrollTop: $(to).offset().top
  }, 1000, =>
    window[guard] = true
  )

window.addEventListener 'wheel', (e) ->
  if (e.wheelDelta < 0)
    if (!window.scrolledToRed)
      scrollTo('.red', 'scrolledToRed')
    else if (!window.scrolledToYellow)
      scrollTo('.green', 'scrolledToGreen')

我创造了一个代表问题的小提琴： https://jsfiddle.net/pn6zqgwu/2/

当用户第一次向下滚动时，我想把他带到红色div，下一次是绿色。我尝试过的解决方案都没有真正起作用，因为它既“跳跃”又滚动到我想要的地方。

如何解决问题？

先谢谢

Answer 1

也许您需要调用e.preventDefault（）来阻止浏览器默认滚动行为

Answer 2

我为你做了一个小提琴，你可以做更多的检查并添加动画

var redTouched = false;
var greenTouched = false;

function scrollCb() {
  event.preventDefault();

  console.log(event.wheelDelta)
  if (event.wheelDelta < 0) {
   if (!redTouched) {
    $(window).scrollTop($('.red').position().top);
    redTouched = true;
  } else if (redTouched && !greenTouched) {
   $(window).scrollTop($('.green').position().top);
   greenTouched = true;
 } else if (redTouched && greenTouched) {
   window.removeEventListener('mousewheel', scrollCb)
 }
} else {
 window.removeEventListener('mousewheel', scrollCb)
}

window.addEventListener('mousewheel', scrollCb);

https://jsfiddle.net/jacobjuul/b0k03wtr/

阻止自动滚动并滚动到div

2 个答案: