滾動條

時間 2019-12-02

標籤滾動條简体版

原文原文鏈接

若是你恰巧須要一個滾動條css

能夠看看這個html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script>

        $.fn.hj_addScroll = function (content) {
            //可配置數據
            //滾動速度
            var speed = speed || 3;
            //滾動條樣式
            scrollBarStyle = {
                "width": '6px',
                "position": 'absolute',
                "top": '0',
                "right": "1px",
                "border-radius": "3px",
                "boxShadow": "1px 1px 1px #666",
                "background": "#c0c0c0",
            }


            //盒子
            var box = $(this);
            var boxH = box.height();
            var boxOffsetT = box.offset().top;


            //內容區域
            var cont = content;
            //內容高度
            var contH = cont.height();


            if (boxH > contH) {
                return false;
            }

            //滾動條
            box.append('<div class="Rain_scrollBar"></div>')
            var scrollBar = $('.Rain_scrollBar');
            //滾動條高度
            scrollBar.css(scrollBarStyle)
            var ratio = boxH / contH;
            scrollBar.height(boxH * ratio + "px");


            var startY = 0;
            var scrollbarOffsetT = 0;

            var isDown = false;
            scrollBar.on('mousedown', function (e) {
                isDown = true;

                //當前位置
                scrollbarOffsetT = scrollBar.offset().top;
                console.log("按下");
                //點擊時位置
                startY = e.pageY;
            });
            $(document).on("mousemove", function (e) {

                if (!isDown) {
                    return false;
                }
                var moveY = e.pageY - startY;


                moveElem(moveY)

                console.log("移動");
            });
            $(document).on("mouseup", function () {

                isDown = false;
                console.log("擡起");
            })


            box.on("mousewheel DOMMouseScroll", function (e) {
                e.stopPropagation();

                var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox


                if (delta > 0) {
                    // 向上滾
                    console.log("wheelup");

                    moveElemByScroll(-speed);


                } else if (delta < 0) {
                    // 向下滾

                    console.log("wheeldown");
                    moveElemByScroll(+speed);


                }
            });
            var moveElemByScroll = function (speed) {
                var barOffsetTop = scrollBar.offset().top;
                var postionTop = barOffsetTop + speed - boxOffsetT;

                if (postionTop < 0) {
                    postionTop = 0
                };
                if (postionTop > boxH - boxH * ratio) {
                    postionTop = boxH - boxH * ratio
                }

                scrollBar.css('top', postionTop + "px");
                cont.css('top', -(postionTop) / ratio + "px");

            }


            function moveElem(moveY) {

                var postionTop = scrollbarOffsetT - boxOffsetT + moveY;

                if (postionTop < 0) {
                    postionTop = 0
                }
                ;
                if (postionTop > boxH - boxH * ratio) {
                    postionTop = boxH - boxH * ratio
                }

                scrollBar.css('top', postionTop + "px");
                cont.css('top', -postionTop / ratio + "px");
            }
        }

        $(function ($) {
            //.hj_scroll 爲scrollBar 所在的額盒子
            //.div2 爲內容區域
            $('.hj_scroll').hj_addScroll($('.div2'));

        })

    </script>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
        }

        .hj_scroll {
            width: 200px;
            height: 300px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
            border: 1px solid #000;
        }

        .div2 {
            width: 180px;
            position: absolute;
            top: 0;
            left: 5px;
        }


    </style>
</head>
<body>
<div class="hj_scroll">

    <div class="div2">
        0<br>
        0<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        2<br>
        2<br>
    </div>
</div>
</body>
</html>

1. jq禁止滾動條滾動，隱藏滾動條
2. 滾動條
3. cv2滾動條
4. overflow滾動條
5. 滾動條（2）
6. HTML滾動條
7. scroll滾動條
8. position:fixed;滾動條
9. CSS滾動條
10. 【NGUI】滾動條
更多相關文章...
• ionic 滾動條 - ionic 教程
• jQuery Mobile 表單滑動條 - jQuery Mobile 教程
• 算法總結-滑動窗口
• SpringBoot中properties文件不能自動提示解決方法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。