js能够修改页面的滚动速度吗？

Question

我现在有个页面，鼠标滑轮时，可以修改页面的滚动速度与距离吗？比如我原先鼠标滑动一下，滚动200px，现在我应该如何修改原生的滚动距离，滑动一下，变成400px

Answer 1

要修改页面的滚动速度和距离，可以使用原生JavaScript实现平滑滚动效果，具体步骤如下：

获取起始位置和终点位置：通过scrollTop属性获取当前位置和指定位置。
计算滚动距离：将终点位置减去起始位置即可得到滚动距离。
设置滚动速度：使用requestAnimationFrame方法和时间差计算出每一帧滚动的距离，从而实现平滑滚动效果。
以下是一个简单的示例代码，将每次滚动的距离从200px修改为400px：

function smoothScroll(targetPosition) {
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  const duration = 1000; // 滚动时间
  let start = null;

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    const scrollY = progress / duration * distance + startPosition;
    window.scrollTo(0, scrollY);
    if (progress < duration) {
      window.requestAnimationFrame(step);
    }
  }

  window.requestAnimationFrame(step);
}

// 在滚动事件中调用smoothScroll函数，传入目标位置
window.addEventListener('wheel', (e) => {
  e.preventDefault();
  let targetPosition = window.pageYOffset + e.deltaY * 400;
  smoothScroll(targetPosition);
});

需要注意的是，修改原生滚动距离可能会影响用户体验，因此应该谨慎使用。

Answer 2

// 获取滚动速度和距离的默认值
var scrollSpeed = 1; // 滚动速度，默认值为1
var scrollDistance = 200; // 滚动距离，默认值为200像素

// 在滚动事件中修改滚动速度和距离
window.addEventListener('wheel', function(e) {
  // 如果滚轮向上滚动，增加滚动距离
  if (e.deltaY < 0) {
    scrollDistance *= 2; // 将滚动距离乘以2
    scrollSpeed *= 1.5; // 将滚动速度增加50%
  }
  // 如果滚轮向下滚动，减小滚动距离
  else {
    scrollDistance /= 2; // 将滚动距离除以2
    scrollSpeed /= 1.5; // 将滚动速度减少50%
  }
  
  // 防止滚动距离或速度小于最小值
  if (scrollDistance < 100) {
    scrollDistance = 100; // 最小滚动距离为100像素
  }
  if (scrollSpeed < 0.5) {
    scrollSpeed = 0.5; // 最小滚动速度为0.5
  }
  
  // 修改滚动速度和距离
  var deltaY = e.deltaY * scrollSpeed; // 计算滚动速度
  window.scrollBy(0, deltaY); // 滚动页面
}, false);

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 3

浏览器应该没这种配置。这玩意有滚轮和触摸板之分，基本是都是自己实现的。

有什么 fullpage 之类的，做整屏滚动的

也有 iscroll 之类自己做滚动模拟的。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 4

不可以，我观察的结果是，浏览器会把总的滚动时间控制在一个合理的范围内，滚的远就快一些，滚的近就慢一些。相关 API 并没有开放。

也没有提供“滚动开始”、“滚动完毕”的 API，使得网页自动化相当难搞。

Answer 5

不是很明白这个需求的目的是为了达到什么效果，但是你可以把触发滚动的内容做成节流，然后动态计算你需要的 scrollTop 实现，最好是用自己实现的滚动好一些。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。