原生JS修改页面滚动距离与速度，实现一次滑动移动400px方法

在网页开发中，我们经常需要对页面的滚动行为进行定制，以实现更好的用户体验。本文将介绍如何使用原生JavaScript修改页面滚动距离与速度，实现一次滑动移动400px的效果。

我们需要了解JavaScript中与页面滚动相关的属性和方法。其中，window对象的scrollTo()方法可以用于将页面滚动到指定的位置。该方法接受两个参数，分别是水平滚动距离和垂直滚动距离。例如，要将页面滚动到垂直方向上距离顶部400px的位置，可以使用以下代码：

window.scrollTo(0, 400);

然而，直接使用scrollTo()方法会导致页面瞬间跳转到指定位置，没有平滑滚动的效果。为了实现平滑滚动，我们可以使用requestAnimationFrame()方法来逐步改变滚动位置。

以下是一个实现一次滑动移动400px并带有平滑滚动效果的示例代码：

function smoothScroll(targetY) {
    const startY = window.scrollY;
    const distance = targetY - startY;
    const duration = 500; 
    let startTime = null;

    function animation(currentTime) {
        if (!startTime) {
            startTime = currentTime;
        }
        const timeElapsed = currentTime - startTime;
        const progress = Math.min(timeElapsed / duration, 1);
        window.scrollTo(0, startY + distance * progress);
        if (timeElapsed < duration) {
            requestAnimationFrame(animation);
        }
    }
    requestAnimationFrame(animation);
}

// 点击按钮触发滚动
document.getElementById('scrollButton').addEventListener('click', function() {
    smoothScroll(window.scrollY + 400);
});

在上述代码中，smoothScroll()函数接受目标滚动位置作为参数，并通过requestAnimationFrame()方法逐步改变滚动位置，实现平滑滚动的效果。

通过使用原生JavaScript修改页面滚动距离与速度，我们可以实现一次滑动移动400px的效果，为用户提供更好的交互体验。这种方法具有良好的兼容性，可以在各种浏览器中正常运行。