CSS 在没有滚动条的页面上检测滚动

在本文中，我们将介绍如何使用CSS检测没有滚动条的页面上的滚动情况，并通过示例来说明。

阅读更多：CSS 教程

1. 检测页面是否有滚动条

有时候，我们需要在页面上执行特定的操作，但只有在页面滚动时才能触发。在没有滚动条的页面上，如何检测滚动呢？这里有一个解决方法：

body {
    overflow: scroll;
}

body::-webkit-scrollbar {
    width: 0.1px;
    background-color: transparent;
}

上述代码中，我们通过给body元素添加overflow: scroll;样式，强制为页面添加一个滚动条。然而，由于滚动条的宽度几乎是不可见的（只有0.1像素），所以用户在页面上看不到滚动条的存在。这样一来，我们就可以通过监测页面是否有滚动事件来判断页面是否在滚动。

document.body.addEventListener('scroll', function() {
    // 页面正在滚动时执行的操作
});

您可以在上述代码中添加适当的操作，以便在页面滚动时触发。

2. 监测页面滚动的位置

除了检测页面是否在滚动外，有时我们还希望获取页面滚动的位置，以便执行相应的操作。以下是一个示例代码：

body {
    height: 2000px;
}

#scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background-color: red;
    transition: width 0.3s;
}

上述代码中，我们创建了一个红色的进度条#scroll-progress-bar，并使用CSS的transition属性实现了宽度的平滑过渡效果。

document.body.addEventListener('scroll', function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    var windowHeight = document.documentElement.clientHeight || window.innerHeight;
    var progress = (scrollTop / (scrollHeight - windowHeight)) * 100;
    document.getElementById('scroll-progress-bar').style.width = progress + '%';
});

在上述代码中，我们使用document.documentElement.scrollTop和document.body.scrollTop来获取页面的滚动位置。然后，我们计算出页面的滚动高度scrollHeight和窗口的高度windowHeight，以便计算出滚动的进度。最后，我们将进度赋值给进度条的宽度。

您可以根据需要自定义进度条的样式和相应的操作。

3. 监测特定元素的滚动

有时候，我们只对特定元素的滚动感兴趣，而不是整个页面。以下是一个示例代码：

<div id="scrollable-element">
    <!-- 可滚动的内容 -->
</div>

#scrollable-element {
    height: 300px;
    overflow: scroll;
}

#scrollable-element::-webkit-scrollbar {
    width: 0.1px;
    background-color: transparent;
}

上述代码中，我们创建了一个高度为300像素的可滚动的元素#scrollable-element。

var scrollableElement = document.getElementById('scrollable-element');
scrollableElement.addEventListener('scroll', function() {
    // 元素正在滚动时执行的操作
});

在上述代码中，我们通过获取可滚动元素#scrollable-element的引用，然后添加滚动事件监听器。您可以在事件监听器中执行特定操作。