当前位置：首页 > article >正文

用js手动写一个纵向滚动条

article 2025/2/27 14:04:11

业务场景：由于通过css无法改动ios设备的滚动条样式，所以这里采取用js手动写一个纵向滚动条

功能：实现滚动的时候出现滚动条，停止滚动，滚动条消失，示例代码如下：

<!DOCTYPE html>
<html>

<head>
    <title>自定义滚动条</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ::-webkit-scrollbar {
        display: none;
    }

    .container {
        position: relative;
        width: 300px;
        height: 200px;
        overflow: hidden;
        margin-top: 100px;
        border: 1px solid red;
    }


    .content {
        position: absolute;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        margin: 5px;
        overflow: auto;
    }

    .scrollbar {
        position: absolute;
        right: 0;
        top: 0;
        width: 10px;
        height: 100%;
        background-color: #eee;
        opacity: 0;

    }

    .show {
        opacity: 1;
    }

    .none {
        opacity: 0;
        animation: fadenum 1s 1;
    }

    @keyframes fadenum {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    .thumb {
        position: absolute;
        right: 0;
        top: 0;
        width: 10px;
        background-color: #999;
        cursor: pointer;
    }
</style>

<body>
    <div class="container">
        <div class="content">
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
            <div>床前明月光</div>
        </div>
        <div class="scrollbar">
            <div class="thumb"></div>
        </div>
    </div>

    <script>

        var container = document.querySelector(".container");
        var content = document.querySelector(".content");
        var scrollbar = document.querySelector(".scrollbar");
        var thumb = document.querySelector(".thumb");
        thumb.style.height = (container.clientHeight / content.scrollHeight) * container.clientHeight + "px";
        content.addEventListener("scroll", function () {
            scrollbar.classList.add('show')
            scrollbar.classList.remove('none')
            var scrollPercent = content.scrollTop / (content.scrollHeight - content.clientHeight);
            var thumbPosition = (container.clientHeight - thumb.offsetHeight) * scrollPercent;
            thumb.style.top = thumbPosition + "px";
        });
        container.addEventListener("touchend", function (e) {
            setTimeout(() => {
                scrollbar.classList.add('none')
                scrollbar.classList.remove('show')
            }, 1500);

        })
        thumb.addEventListener("mousedown", function (e) {
            e.preventDefault();
            scrollbar.style.display = 'block'
            var startY = e.clientY;
            var startTop = thumb.offsetTop;
            document.addEventListener("mousemove", mousemove);
            document.addEventListener("mouseup", mouseup);
            function mousemove(e) {
                var delta = e.clientY - startY;
                var thumbPosition = startTop + delta;
                if (thumbPosition < 0) {
                    thumbPosition = 0;
                }
                if (thumbPosition > container.clientHeight - thumb.offsetHeight) {
                    thumbPosition = container.clientHeight - thumb.offsetHeight;
                }
                var scrollPercent = thumbPosition / (container.clientHeight - thumb.offsetHeight);
                content.scrollTop = scrollPercent * (content.scrollHeight - content.clientHeight);
                thumb.style.top = thumbPosition + "px";
            }
            function mouseup(e) {
                document.removeEventListener("mousemove", mousemove);
                document.removeEventListener("mouseup", mouseup);
            }
        });
    </script>
</body>

</html>