带滚动条的文章栏

最新推荐文章于 2024-10-27 11:25:22 发布

英雄的小学生

最新推荐文章于 2024-10-27 11:25:22 发布

阅读量111

点赞数 1

文章标签： javascript html5

本文链接：https://blog.csdn.net/lgs798/article/details/118115718

版权

带滚动条的文章栏

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 500px;
            height: 600px;
            overflow: hidden;
        }
        
        #sc {
            width: 20px;
            height: 100%;
            background-color: pink;
            float: left;
            position: relative;
        }
        
        p {
            float: left;
            width: 480px;
            /* margin-top: -500px; */
            margin: 0px;
            padding: 0px;
            user-select: none
        }
        
        #tiao {
            width: 20px;
            height: 40px;
            background-color: gainsboro;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">
        <p>
            p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
            p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
            p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
            p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
            p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
            p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
            p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
            p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容

        </p>
        <div id="sc">
            <div id="tiao"></div>
        </div>
    </div>

    <script>
        var tiao = document.getElementById("tiao")
        var p = document.getElementsByTagName("p")[0]
        var box = document.getElementById("box")
        var n = 0
        var pheight = getStyle(p, "height")
        var beilv = (parseInt(pheight) - 600) / 560
        console.log(beilv)
        box.onmousewheel = scroll;
        if (box.addEventListener) {
            box.addEventListener("DOMMouseScroll", scroll);
        }
        //鼠标按下时执行的代码
        tiao.onmousedown = function() {
            //计算鼠标与滚动条的距离差值
            var t = event.clientY - tiao.offsetTop
                //鼠标移动时运行的代码
            document.onmousemove = function() {
                //鼠标移动时，带动y值移动，由y值决定滚动条移动的位置以及文章滚动的高度
                var y = event.clientY - t
                    //防止滚动条移出框外
                    //560的值为，div的高度-滚动条的高度
                    //即600-40
                if (y >= 560) {
                    y = 560
                }
                if (y <= 0) {
                    y = 0
                }
                tiao.style.top = y + "px"
                    //下方beilv的算法为 (p长度-div长度+#sc长度)/div长度
                    //也就是(1176-600)/(600-40)
                    //这里可以用getstyle来代替，可以适配更多的状况
                p.style.marginTop = -y * beilv + "px"
            }
        }
        document.onmouseup = function() {
                document.onmousemove = null
            }
            //鼠标滚动事件
        function scroll(ev) {
            var event = window.event || ev;
            var t = event.clientY - tiao.offsetTop
            var y = event.clientY - t
                //判断鼠标移动的方向
            var tag = true;
            if (event.wheelDelta) {
                tag = event.wheelDelta > 0 ? true : false;
            }

            switch (tag) {
                case true:
                    y = y - 10
                    if (y <= 0) {
                        y = 0
                    }
                    tiao.style.top = y + "px"
                    p.style.marginTop = -y * beilv + "px"

                    break;
                case false:
                    y = y + 10
                    if (y >= 560) {
                        y = 560
                    }
                    tiao.style.top = y + "px"
                    p.style.marginTop = -y * beilv + "px"

                    break;


            }
        }



        function getStyle(el, attr) {
            if (window.getComputedStyle) {
                return getComputedStyle(el)[attr];
            } else {
                return el.currentStyle[attr];
            }
        }
    </script>
</body>

</html>