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

业务场景:由于通过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>

你可能感兴趣的:(javascript,开发语言,ecmascript)