如何使用 HTML CSS 和 JavaScript 创建滚动指示器

在很多现代网站中，滚动指示器已经成为了一个标配。它可以帮助用户快速了解当前页面的位置，方便用户的操作和导航。本文将介绍如何使用 HTML、CSS 和 JavaScript 来创建一个滚动指示器。

1. HTML 结构

首先，在 HTML 中创建一个容器来包装滚动指示器，这个容器可以使用 div 元素。指示器本身可以使用一个 span 元素来表示。

代码如下：

<div class="scroll-indicator">
    <span class="indicator"></span>
</div>

2. CSS 样式

接下来，我们需要设置一些 CSS 样式来使得滚动指示器看起来更加美观并且能够正常工作。我们可以设置容器的宽度、高度、背景颜色，以及指示器的颜色等样式。

代码如下：

.scroll-indicator {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 8px;
    height: 60px;
    background-color: #999;
    border-radius: 4px;
    z-index: 99999;
}

.indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #333;
    border-radius: 4px;
    transition: height 0.2s ease-in-out;
}

3. JavaScript 代码

现在，我们需要编写一些 JavaScript 代码来控制指示器的高度。我们可以使用 window 对象来监听滚动事件，然后动态地修改指示器的高度。

代码如下：

window.addEventListener('scroll', function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    var windowHeight = document.documentElement.clientHeight || window.innerHeight;
    var scrollDistance = scrollTop / (documentHeight - windowHeight) * 100;

    document.querySelector('.indicator').style.height = scrollDistance + '%';
});

4. 完整代码

<div class="scroll-indicator">
    <span class="indicator"></span>
</div>

<style>
    .scroll-indicator {
        position: fixed;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        width: 8px;
        height: 60px;
        background-color: #999;
        border-radius: 4px;
        z-index: 99999;
    }

    .indicator {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background-color: #333;
        border-radius: 4px;
        transition: height 0.2s ease-in-out;
    }
</style>

<script>
    window.addEventListener('scroll', function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        var windowHeight = document.documentElement.clientHeight || window.innerHeight;
        var scrollDistance = scrollTop / (documentHeight - windowHeight) * 100;

        document.querySelector('.indicator').style.height = scrollDistance + '%';
    });
</script>

以上就是使用 HTML、CSS 和 JavaScript 创建滚动指示器的完整代码。希望本文能对你有所帮助。