当前位置：首页 > JavaScript

js实现滚动距离

2026-02-03 01:44:00JavaScript

获取滚动距离的方法

使用window.pageYOffset或window.scrollY可以获取垂直滚动距离。这两个属性返回的值相同，都是文档从顶部开始滚动过的像素数。

const scrollDistance = window.pageYOffset || window.scrollY;
console.log(scrollDistance);

对于水平滚动距离，可以使用window.pageXOffset或window.scrollX。

const horizontalScroll = window.pageXOffset || window.scrollX;
console.log(horizontalScroll);

监听滚动事件

通过添加scroll事件监听器，可以实时获取滚动距离。

window.addEventListener('scroll', function() {
    const scrollDistance = window.pageYOffset || window.scrollY;
    console.log('当前滚动距离:', scrollDistance);
});

兼容性处理

对于旧版浏览器，可以使用document.documentElement.scrollTop或document.body.scrollTop作为备选方案。

const scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollDistance);

滚动到指定位置

使用window.scrollTo()方法可以将页面滚动到指定位置。

window.scrollTo({
    top: 500, // 滚动到距离顶部500像素的位置
    behavior: 'smooth' // 平滑滚动
});

获取元素的滚动距离

对于具有滚动条的元素（如div），可以使用scrollTop属性获取其滚动距离。

const element = document.getElementById('scrollable-div');
console.log(element.scrollTop); // 垂直滚动距离
console.log(element.scrollLeft); // 水平滚动距离

设置元素的滚动距离

通过修改scrollTop或scrollLeft属性，可以设置元素的滚动位置。

const element = document.getElementById('scrollable-div');
element.scrollTop = 100; // 设置垂直滚动距离为100像素

平滑滚动动画

使用requestAnimationFrame可以实现自定义的平滑滚动效果。

function smoothScrollTo(targetPosition, duration = 1000) {
    const startPosition = window.pageYOffset;
    const distance = targetPosition - startPosition;
    let startTime = null;

    function animation(currentTime) {
        if (!startTime) startTime = currentTime;
        const timeElapsed = currentTime - startTime;
        const run = easeInOutQuad(timeElapsed, startPosition, distance, duration);
        window.scrollTo(0, run);
        if (timeElapsed < duration) requestAnimationFrame(animation);
    }

    function easeInOutQuad(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    }

    requestAnimationFrame(animation);
}

// 使用示例
smoothScrollTo(500, 1000);

滚动到元素位置

使用Element.scrollIntoView()方法可以将元素滚动到可视区域。

const element = document.getElementById('target-element');
element.scrollIntoView({
    behavior: 'smooth',
    block: 'start'
});

获取窗口高度和文档高度

计算滚动百分比或判断是否滚动到底部时，可能需要获取窗口高度和文档高度。

const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
const scrollPercentage = (window.pageYOffset / (documentHeight - windowHeight)) * 100;
console.log(scrollPercentage);

判断是否滚动到底部

通过比较滚动距离和文档高度，可以判断是否滚动到页面底部。

window.addEventListener('scroll', function() {
    const scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;

    if (scrollDistance + windowHeight >= documentHeight - 10) {
        console.log('已滚动到底部');
    }
});

js实现滚动距离