jquery 我怎样才能使这个反向滚动脚本更有效地工作？

zd287kbt 于 2023-05-28 发布在 jQuery

关注(0)|答案(1)|浏览(192)

我正在设计的网页是非常高的，并在底部加载。我需要的滚动被倒置，这样游客就不必滚动到顶部。我使用的脚本不能完全阻止正常滚动，并导致一些问题：

function onScroll(velocity) {
  var win = $(window)  
  $(win).on('wheel', function(event) {
    event.preventDefault()
    var direction = event.originalEvent.deltaY > 0? 'down': 'up';    
    var position = win.scrollTop();

    if (direction === 'up') {
        $('html, body').animate({
            scrollTop: (position + velocity)
        }, 40);
    }
    else if (direction === 'down') {
        $('html, body').animate({
            scrollTop: (position - velocity)
        }, 40);
    }
  })
}
onScroll(70);

可以对脚本进行哪些调整以简化流程？

jquery

来源：https://stackoverflow.com/questions/76304021/how-can-i-make-this-inverted-scrolling-script-work-more-efficiently

1条答案

按热度按时间

pgx2nnw81#

你不一定需要jQuery。
下面是一个使用纯JavaScript反转“滚轮”滚动方向的示例：

const elScroll = document.documentElement;

elScroll.addEventListener("wheel", (evt) => {

  evt.preventDefault();
  const delta = Math.sign(-evt.deltaY);
  
  elScroll.scrollBy({
    top: 70 * delta,
    // behavior: "smooth" // will not work I'm afraid
  });
  
}, { passive: false });

body {
  border: 3px dashed;
  height: 300vh;
}

Wheel-up to scroll down, and vice-versa

遗憾的是，behavior: "smooth"选项将无法与上述选项一起正常工作。要使动画工作，您必须找到另一个解决方法。

赞(0）回复(0）举报 2023-05-28

我来回答

jquery 我怎样才能使这个反向滚动脚本更有效地工作？

1条答案

相关问题

热门标签

最新问答