MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript处理文档滚动监听

2022-04-226.6k 阅读

JavaScript 处理文档滚动监听基础概念

什么是文档滚动监听

在 Web 开发中，文档滚动监听指的是通过 JavaScript 代码来实时监测文档（通常是网页）的滚动事件。当用户滚动页面时，浏览器会触发相应的滚动事件，我们可以利用 JavaScript 来捕获这些事件，并执行特定的操作。例如，当页面滚动到某个特定位置时，显示或隐藏导航栏，实现图片的懒加载，或者触发动画效果等。这种交互性能够极大地提升用户体验，使网页更加动态和响应式。

为什么要进行文档滚动监听

  1. 优化用户体验：通过根据滚动位置来动态改变页面元素的显示状态，如固定导航栏，让用户在浏览长页面时始终能方便地访问重要导航选项，提升导航的便捷性。又比如实现图片懒加载，只有当图片即将进入视口时才加载，减少初始加载时间，提升页面加载性能，对于移动设备用户或网络条件不佳的用户尤为重要。
  2. 创造动态交互效果：许多现代网页设计都追求生动、交互性强的用户界面。文档滚动监听使得我们可以在用户滚动页面时触发各种动画，如元素的淡入淡出、滑动、缩放等，为用户带来沉浸式的浏览体验，增强页面的趣味性和吸引力。
  3. 实现特定业务逻辑：在一些业务场景中，例如单页应用（SPA）的导航管理，需要根据页面滚动到不同的“章节”来更新导航状态，以提供清晰的页面位置指示，方便用户了解当前所在位置以及快速导航到其他部分。

监听滚动事件的基本方法

使用 window.onscroll

在 JavaScript 中，最基本的监听文档滚动事件的方式是通过 window.onscroll 属性。这个属性允许我们为窗口的滚动事件绑定一个处理函数。每当窗口发生滚动时，该处理函数就会被调用。

window.onscroll = function () {
    console.log('窗口正在滚动');
};

在上述代码中，我们简单地将一个匿名函数赋值给 window.onscroll。每次窗口滚动时，控制台就会输出“窗口正在滚动”。然而，这种方式有一定的局限性，它只能为滚动事件绑定一个处理函数。如果在一个复杂的项目中，多个模块都需要监听滚动事件，使用 window.onscroll 就不太方便了，因为后绑定的函数会覆盖之前的函数。

使用 addEventListener

为了更灵活地处理滚动事件，我们可以使用 addEventListener 方法。addEventListener 允许我们为同一个事件绑定多个处理函数，并且可以指定事件捕获或冒泡阶段。

window.addEventListener('scroll', function () {
    console.log('通过 addEventListener 监听滚动');
});

上述代码通过 addEventListener 为窗口的 scroll 事件绑定了一个匿名函数。当窗口滚动时，控制台会输出“通过 addEventListener 监听滚动”。与 window.onscroll 不同，我们可以多次调用 addEventListener 来绑定多个不同的处理函数。

window.addEventListener('scroll', function () {
    console.log('第一个处理函数');
});
window.addEventListener('scroll', function () {
    console.log('第二个处理函数');
});

在这个例子中，每次窗口滚动时，控制台会依次输出“第一个处理函数”和“第二个处理函数”。这使得代码的模块化和复用性更强，不同的功能模块可以独立地监听滚动事件而互不干扰。

获取滚动位置

滚动位置相关属性

  1. window.pageXOffset 和 window.pageYOffset：这两个属性用于获取文档在水平和垂直方向上的滚动距离。window.pageXOffset 表示文档在水平方向上滚动的像素数，window.pageYOffset 表示文档在垂直方向上滚动的像素数。在现代浏览器中，这两个属性是标准的获取滚动位置的方式。
window.addEventListener('scroll', function () {
    const x = window.pageXOffset;
    const y = window.pageYOffset;
    console.log(`水平滚动距离: ${x}, 垂直滚动距离: ${y}`);
});
  1. document.documentElement.scrollLeft 和 document.documentElement.scrollTop：在一些较旧的浏览器（如 Internet Explorer）中，window.pageXOffset 和 window.pageYOffset 可能无法正常工作。此时，可以使用 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 来获取滚动位置。document.documentElement 代表文档的根元素（通常是 <html> 元素），scrollLeft 和 scrollTop 分别表示该元素在水平和垂直方向上的滚动距离。
window.addEventListener('scroll', function () {
    const x = document.documentElement.scrollLeft;
    const y = document.documentElement.scrollTop;
    console.log(`水平滚动距离: ${x}, 垂直滚动距离: ${y}`);
});
  1. document.body.scrollLeft 和 document.body.scrollTop：在某些情况下，特别是在没有声明 DOCTYPE 的 HTML 文档中，滚动位置信息可能存储在 document.body 元素上。因此，为了确保在各种情况下都能准确获取滚动位置，我们可以使用如下兼容代码：
function getScrollPosition() {
    return {
        x: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        y: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    };
}

window.addEventListener('scroll', function () {
    const position = getScrollPosition();
    console.log(`水平滚动距离: ${position.x}, 垂直滚动距离: ${position.y}`);
});

上述代码定义了一个 getScrollPosition 函数，该函数通过兼容不同浏览器的方式获取滚动位置，并返回一个包含水平和垂直滚动距离的对象。

基于滚动位置的常见应用场景

固定导航栏

许多网页在用户滚动页面时，会将导航栏固定在页面顶部，以便用户随时访问导航选项。实现这一效果的关键在于根据滚动位置来改变导航栏的 CSS 定位属性。

假设我们有一个 HTML 结构如下：

<nav id="navbar">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>
<div class="content">
    <!-- 大量内容 -->
</div>

以及相应的 CSS 样式：

#navbar {
    background-color: #333;
    color: white;
    padding: 10px;
    position: static;
}
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
}

JavaScript 代码如下：

const navbar = document.getElementById('navbar');
window.addEventListener('scroll', function () {
    if (window.pageYOffset > 100) {
        navbar.classList.add('fixed');
    } else {
        navbar.classList.remove('fixed');
    }
});

在上述代码中，我们首先获取导航栏元素。然后，通过监听滚动事件，当垂直滚动距离超过 100 像素时，为导航栏添加 fixed 类，使其变为固定定位；当滚动距离小于 100 像素时，移除 fixed 类，恢复原来的定位。

图片懒加载

图片懒加载是一种优化页面性能的技术，它只在图片即将进入视口（用户可见区域）时才加载图片。这可以显著减少初始页面加载时间，特别是对于包含大量图片的页面。

假设我们有如下 HTML 结构：

<div class="image-container">
    <img data-src="image1.jpg" alt="图片 1" class="lazy-load">
    <img data-src="image2.jpg" alt="图片 2" class="lazy-load">
    <img data-src="image3.jpg" alt="图片 3" class="lazy-load">
</div>

CSS 样式：

.lazy-load {
    width: 300px;
    height: 200px;
    background-color: lightgray;
}

JavaScript 代码实现懒加载：

function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

function loadLazyImages() {
    const lazyImages = document.querySelectorAll('.lazy-load');
    lazyImages.forEach(function (img) {
        if (isElementInViewport(img)) {
            img.src = img.dataset.src;
            img.classList.remove('lazy-load');
        }
    });
}

window.addEventListener('scroll', loadLazyImages);
loadLazyImages(); // 初始加载时检查

在上述代码中，我们定义了 isElementInViewport 函数来判断元素是否在视口内。loadLazyImages 函数用于检查所有具有 lazy-load 类的图片，并在它们进入视口时加载图片。通过监听滚动事件和初始加载时调用 loadLazyImages 函数，实现图片的懒加载。

触发动画效果

文档滚动监听还常用于触发页面元素的动画效果，如淡入淡出、滑动、缩放等。以下以淡入动画为例。

假设我们有如下 HTML 结构：

<div class="animate-on-scroll" data-animation="fade-in">元素 1</div>
<div class="animate-on-scroll" data-animation="fade-in">元素 2</div>
<div class="animate-on-scroll" data-animation="fade-in">元素 3</div>

CSS 样式：

.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.fade-in {
    opacity: 1;
}

JavaScript 代码：

function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

function triggerAnimations() {
    const elements = document.querySelectorAll('.animate-on-scroll');
    elements.forEach(function (element) {
        if (isElementInViewport(element)) {
            const animationClass = element.dataset.animation;
            element.classList.add(animationClass);
        }
    });
}

window.addEventListener('scroll', triggerAnimations);
triggerAnimations(); // 初始加载时检查

在上述代码中，我们首先定义了 isElementInViewport 函数用于判断元素是否在视口内。triggerAnimations 函数遍历所有具有 animate-on-scroll 类的元素，当元素进入视口时，根据 data - animation 属性添加相应的动画类，从而触发淡入动画。通过监听滚动事件和初始加载时调用 triggerAnimations 函数，实现滚动触发动画效果。

性能优化

防抖（Debounce）

在处理滚动事件时，如果处理函数执行的操作比较复杂，频繁触发滚动事件可能会导致性能问题。防抖技术可以解决这个问题。防抖的原理是在一定时间内，如果事件被多次触发，只有最后一次触发会执行处理函数。

以下是一个简单的防抖函数实现：

function debounce(func, delay) {
    let timer;
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

const complexFunction = function () {
    console.log('复杂操作执行');
};

const debouncedFunction = debounce(complexFunction, 300);

window.addEventListener('scroll', debouncedFunction);

在上述代码中，debounce 函数接收一个函数 func 和延迟时间 delay。它返回一个新的函数，这个新函数在每次被调用时会清除之前设置的定时器，并重新设置一个新的定时器。只有当延迟时间过去后，func 才会被执行。这样，即使滚动事件频繁触发，complexFunction 也只会在停止滚动 300 毫秒后执行一次，有效减少了不必要的计算。

节流（Throttle）

节流与防抖类似，但节流是在一定时间间隔内，无论事件触发多少次，处理函数都只会执行一次。

以下是一个简单的节流函数实现：

function throttle(func, interval) {
    let lastTime = 0;
    return function () {
        const context = this;
        const args = arguments;
        const now = new Date().getTime();
        if (now - lastTime >= interval) {
            func.apply(context, args);
            lastTime = now;
        }
    };
}

const anotherComplexFunction = function () {
    console.log('另一个复杂操作执行');
};

const throttledFunction = throttle(anotherComplexFunction, 200);

window.addEventListener('scroll', throttledFunction);

在上述代码中，throttle 函数接收一个函数 func 和时间间隔 interval。它返回一个新的函数，这个新函数在每次被调用时，会检查当前时间与上次执行函数的时间间隔是否大于 interval。如果大于 interval，则执行 func 并更新上次执行时间。这样，即使滚动事件频繁触发，anotherComplexFunction 也只会每隔 200 毫秒执行一次，避免了过于频繁的计算，提升了性能。

跨浏览器兼容性

不同浏览器的滚动事件差异

虽然现代浏览器在处理滚动事件和获取滚动位置方面已经有了较好的一致性，但仍存在一些细微的差异需要注意。

  1. 旧版 Internet Explorer：如前文所述，旧版 Internet Explorer 不支持 window.pageXOffset 和 window.pageYOffset，需要通过 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 或 document.body.scrollLeft 和 document.body.scrollTop 来获取滚动位置。
  2. Safari：在 Safari 浏览器中，当页面使用 position: fixed 元素时，可能会出现滚动位置计算不准确的问题。这通常是由于 Safari 在处理固定定位元素的渲染和滚动时的一些特性导致的。一种解决方法是在页面加载完成后，通过 JavaScript 手动调整滚动位置的计算，例如：
window.addEventListener('load', function () {
    if (navigator.userAgent.match(/Safari/) &&!navigator.userAgent.match(/Chrome/)) {
        document.body.style.overflowY = 'hidden';
        document.documentElement.style.overflowY = 'auto';
    }
});

上述代码在页面加载完成后，检查浏览器是否为 Safari（非 Chrome，因为 Chrome 也包含 Safari 标识），如果是，则通过调整 body 和 documentElement 的 overflow 属性来优化滚动计算。

使用 polyfill 解决兼容性问题

为了确保在各种浏览器中都能一致地处理滚动事件和获取滚动位置，可以使用 polyfill。例如，对于 window.pageXOffset 和 window.pageYOffset 的兼容性，可以添加如下 polyfill：

if (typeof window.pageXOffset === 'undefined') {
    Object.defineProperty(window, 'pageXOffset', {
        get: function () {
            return document.documentElement.scrollLeft || document.body.scrollLeft;
        }
    });
    Object.defineProperty(window, 'pageYOffset', {
        get: function () {
            return document.documentElement.scrollTop || document.body.scrollTop;
        }
    });
}

上述代码通过 Object.defineProperty 为 window 对象定义了 pageXOffset 和 pageYOffset 属性的 getter 方法，在不支持原生 pageXOffset 和 pageYOffset 的浏览器中，通过 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 或 document.body.scrollLeft 和 document.body.scrollTop 来模拟其功能。这样，在后续的代码中就可以统一使用 window.pageXOffset 和 window.pageYOffset 来获取滚动位置，而无需担心浏览器兼容性问题。

高级应用场景与技巧

视差滚动

视差滚动是一种常见的网页设计效果，它通过让不同层次的元素以不同的速度滚动，营造出一种立体的、沉浸式的浏览体验。实现视差滚动的关键在于根据滚动位置计算每个元素的移动距离。

假设我们有如下 HTML 结构：

<div class="parallax-layer" data-speed="0.5">背景层 1</div>
<div class="parallax-layer" data-speed="0.8">背景层 2</div>
<div class="content">
    <!-- 页面内容 -->
</div>

CSS 样式：

.parallax-layer {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    line-height: 100vh;
}

JavaScript 代码实现视差滚动：

function parallaxScroll() {
    const layers = document.querySelectorAll('.parallax-layer');
    layers.forEach(function (layer) {
        const speed = parseFloat(layer.dataset.speed);
        const y = window.pageYOffset * speed;
        layer.style.transform = `translateY(${y}px)`;
    });
}

window.addEventListener('scroll', parallaxScroll);

在上述代码中，我们定义了 parallaxScroll 函数，该函数遍历所有具有 parallax - layer 类的元素。根据每个元素的 data - speed 属性计算其在垂直方向上的移动距离，并通过 transform 属性来设置元素的位置，从而实现视差滚动效果。每次滚动事件触发时，都会调用 parallaxScroll 函数更新元素位置。

无限滚动

无限滚动是指当用户滚动到页面底部时，自动加载更多内容，给用户一种页面内容无穷无尽的感觉。实现无限滚动通常需要结合 AJAX 请求来获取新的数据。

假设我们有如下 HTML 结构：

<div id="content"></div>
<div id="loading" style="display: none;">加载中...</div>

JavaScript 代码实现无限滚动：

function loadMore() {
    // 模拟 AJAX 请求获取新数据
    setTimeout(function () {
        const newContent = document.createElement('div');
        newContent.textContent = '新内容';
        document.getElementById('content').appendChild(newContent);
        document.getElementById('loading').style.display = 'none';
    }, 1000);
}

function isNearBottom() {
    return (
        window.innerHeight + window.pageYOffset >= document.documentElement.offsetHeight - 100
    );
}

window.addEventListener('scroll', function () {
    if (isNearBottom() && document.getElementById('loading').style.display === 'none') {
        document.getElementById('loading').style.display = 'block';
        loadMore();
    }
});

在上述代码中，loadMore 函数模拟了一个 AJAX 请求，通过 setTimeout 延迟 1 秒后创建一个新的内容元素并添加到页面中。isNearBottom 函数用于判断用户是否滚动到距离页面底部 100 像素以内的位置。当用户滚动到该位置且加载指示器处于隐藏状态时，显示加载指示器并调用 loadMore 函数加载新内容，实现无限滚动效果。

多页面滚动监听与管理

在一些单页应用（SPA）或多页面应用中，可能需要在不同页面或视图中进行滚动监听，并进行统一的管理。可以通过使用事件总线或发布 - 订阅模式来实现这一功能。

以下是一个简单的基于事件总线的实现示例：

const eventBus = new (function () {
    const events = {};
    return {
        on(eventName, callback) {
            if (!events[eventName]) {
                events[eventName] = [];
            }
            events[eventName].push(callback);
        },
        emit(eventName, data) {
            if (events[eventName]) {
                events[eventName].forEach(function (callback) {
                    callback(data);
                });
            }
        }
    };
})();

function scrollHandler() {
    const position = {
        x: window.pageXOffset,
        y: window.pageYOffset
    };
    eventBus.emit('scroll', position);
}

window.addEventListener('scroll', scrollHandler);

// 不同模块监听滚动事件
eventBus.on('scroll', function (position) {
    console.log(`模块 1 监听到滚动，位置: ${position.x}, ${position.y}`);
});
eventBus.on('scroll', function (position) {
    console.log(`模块 2 监听到滚动，位置: ${position.x}, ${position.y}`);
});

在上述代码中，我们定义了一个简单的事件总线 eventBus，它具有 on 和 emit 方法，分别用于订阅事件和发布事件。在 scrollHandler 函数中，每当滚动事件触发时，获取滚动位置并通过 eventBus.emit 发布 scroll 事件及滚动位置数据。不同的模块可以通过 eventBus.on 方法订阅 scroll 事件，并在事件触发时执行相应的操作，从而实现多页面或多模块的滚动监听统一管理。

通过以上对 JavaScript 处理文档滚动监听的详细介绍，从基础概念到高级应用，以及性能优化和兼容性处理，相信读者已经对这一重要的 Web 开发技术有了全面深入的理解，可以在实际项目中灵活运用，创造出更加出色的用户体验。