平滑的水平滚动

Question

我正在开发一个在桌面上水平溢出的网站，而不是通常的垂直滚动。这一切都工作正常，但是为了改善用户体验，我必须修改滚动量以便一次移动屏幕的较大部分。我使用的代码的问题是它没有提供非常流畅的体验：运动似乎相当笨拙。

这是我正在使用的代码片段，它在

mousewheel

事件上执行：

function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.documentElement.scrollLeft -= (delta*60); // Multiplied by 60
    document.body.scrollLeft -= (delta*60); // Multiplied by 60
    e.preventDefault();
}

如您所见，我必须修改 delta * 60 才能将滚动条移动足够的量。

我想知道是否可以使其平滑过渡，而不是（看起来）一次将用户分块到固定的像素量。

我尝试过使用

scrollBy({ left: <amount>, behavior: 'smooth' });

，但这似乎并没有提供良好的用户体验：它似乎只是稍微缓解了运动，但感觉滞后且不一致。

我希望用户能够顺利地设置所需数量的动画。有谁知道这是否可能？

我实际上已经在 Vue 3 应用程序中构建了这个，所以我会感兴趣 Vue 是否有任何方法来处理这个问题？不过我很高兴使用原生 js。

谢谢

Answer 1

你可以试试这个方法。

<template>
 <div v-scrollHorizontally="scrollHorizontally"></div>
</template>
<script>
export default {
 method: {
  scrollHorizontally(e) {
   e = window.event || e;
   var delta = Math.max(-1, Math.min(1, (e.wheelDelta || - e.detail)));
   var scrollAmount = delta * 60;
   window.scrollBy({ left: scrollAmount, behavior: 'smooth'});
   e.preventDefault();
  }
 }
}
</script>