js移动端滑动滚动条

基础概念

在JavaScript中，移动端滑动滚动条通常涉及到处理触摸事件（如touchstart、touchmove、touchend）来实现平滑的滚动效果。滚动条是用户界面中的一个元素，允许用户通过拖动或滚动来查看内容超出视口的部分。

类型

原生滚动：浏览器自带的滚动行为。
自定义滚动：通过JavaScript和CSS实现的个性化滚动效果。

应用场景

长页面滚动：如新闻网站、博客等。
无限滚动：社交媒体、电商网站等。
滚动动画：引导页、轮播图等。

示例代码

以下是一个简单的自定义滚动条的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Scrollbar</title>
    <style>
        .scroll-container {
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .scroll-content {
            width: 100%;
            height: auto;
            padding-right: 20px; /* 防止内容被滚动条遮挡 */
        }
        .scrollbar {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
        }
        .scrollbar-thumb {
            width: 100%;
            height: 30px;
            background: rgba(0, 0, 0, 0.3);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-content">
            <!-- 这里放置大量内容 -->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            <!-- 更多内容 -->
        </div>
        <div class="scrollbar">
            <div class="scrollbar-thumb"></div>
        </div>
    </div>

    <script>
        const container = document.querySelector('.scroll-container');
        const content = document.querySelector('.scroll-content');
        const thumb = document.querySelector('.scrollbar-thumb');

        let isDragging = false;
        let startY, startTop;

        thumb.addEventListener('mousedown', (e) => {
            isDragging = true;
            startY = e.clientY;
            startTop = parseInt(thumb.style.top) || 0;
        });

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            const deltaY = e.clientY - startY;
            let newTop = startTop + deltaY;
            if (newTop < 0) newTop = 0;
            if (newTop > container.clientHeight - thumb.clientHeight) newTop = container.clientHeight - thumb.clientHeight;
            thumb.style.top = `${newTop}px`;
            const scrollPercentage = newTop / (container.clientHeight - thumb.clientHeight);
            content.style.transform = `translateY(-${scrollPercentage * (content.scrollHeight - container.clientHeight)}px)`;
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });
    </script>
</body>
</html>