jquery: custom scroll

DOCTYPE html>
html lang="en">

head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>自定义滚动条title>
    link rel="stylesheet" href="../css/reset.css">
    style type="text/css">
        body {
            background-color: #ccc;
        }

        .scroll-wrap {
            width: 540px;
            margin: 30px auto;
            border: 1px solid #f5f5f5;
            background-color: #fff;
        }

        .scroll-box {
            position: relative;
            width: 100%;
            height: 300px;
        }

        .scroll-box .scroll-content {
            height: 100%;
            padding: 0 10px;
            overflow: hidden;
        }

        .scroll-box:hover .scroll-bar {
            display: block;
        }

        .scroll-box .scroll-content h3 {
            font: 16px/3 "Microsoft Yahei";
            text-align: center;
        }

        .scroll-box .scroll-content p {
            font-size: 14px;
            line-height: 20px;
            text-indent: 2em;
            margin-bottom: 10px;
        }

        .scroll-box .scroll-bar {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            width: 5px;
            height: 100%;
            background-color: #fff;
        }

        .scroll-box .scroll-bar .scroll-slider {
            position: absolute;
            top: 0;
            left: 1px;
            width: 3px;
            border-radius: 25%;
            background-color: #ddd;
        }
    style>
head>

body>
    div class="scroll-wrap">
        
        div class="scroll-box">
            div class="scroll-content">
                h3>titleh3>
                p>测试scroll需加长文章长度p>
            div>
            div class="scroll-bar">
                
                div class="scroll-slider">div>
            div>
        div>
    div>
body>
script src="../JavaScript/jquery.min.js">script>
script>

    (function (win, doc, $) {
        function CustomScrollBar(options) {
            this._init(options);
        }
        $.extend(CustomScrollBar.prototype, {
            // this -> CustomScrollBar
            _init: function (options) {
                let _this = this;
                _this.options = {
                    scrollDir: ‘y‘, //滚动方向
                    contentSelector: ‘‘, //滚动内容区选择器（样式带有overflow为hidden的）
                    barSeletor: ‘‘, //滚动条选择器
                    sliderSelector: ‘‘,  //滚水滑块选择器
                    wheelStep: 10 //滚轮步长
                }
                $.extend(true, _this.options, options || {}); //深拷贝的方式合并两个对象
                _this._initDomEvent();
                return _this;
            },
            _initSliderHeight: function () {
                let _this = this;
                let sliderHeight;
                let contentHeight = _this.$scrollContent.height();
                let contentTotalHeight = _this.$scrollContent[0].scrollHeight;
                let offsetHeight = contentTotalHeight - contentHeight;
                if (offsetHeight  0) {
                    sliderHeight = 0;
                } else {
                    sliderHeight = contentHeight  * contentHeight / contentTotalHeight
                }
                _this.$scrollSlider.height(`${sliderHeight}px`);
                return _this;
            },
            _initDomEvent: function () {
                let opts = this.options;
                // 获取相应Jquery对象
                this.$scrollContent = $(opts.contentSelector);
                this.$scrollSlider = $(opts.sliderSelector);
                this.$scrollBar = opts.barSeletor ? $(opts.barSeletor) : _this.$scrollSlider.parent();
                this.$doc = $(doc);
                this._initSliderHeight();
                //this._initSliderDragEvent();
                this._bindMousewheel();
                this._bindContentScroll();
            },
            _initSliderDragEvent: function () {
                let _this = this;
                let slider = _this.$scrollSlider;
                let sliderElement = slider[0];
                if (sliderElement) {
                    let doc = _this.$doc;
                    let startScrollTop;
                    let startPagePosition;
                    let contentBarRate;
                    function mousemoveHandler(sliderEvent) {
                        event.preventDefault();
                        //判断是否按下鼠标
                        if (startPagePosition == null) {
                            return;
                        }
                        // 内容可移动距离/滑块可移动距离 = 内容移动距离/滑块移动距离
                        let endPagePosition = sliderEvent.pageY
                        let sliderMoveDistance = endPagePosition - startPagePosition;
                        let contentMoveDistance = contentBarRate * sliderMoveDistance;
                        let endScrollTop = startScrollTop + contentMoveDistance;
                        _this.scrollTo(endScrollTop);
                    }
                    slider.on(‘mousedown‘, function (sliderEvent) {
                        event.preventDefault();
                        startPagePosition = event.pageY; //clientY
                        //获取可视区Top到移出可视区Top的距离
                        startScrollTop = _this.$scrollContent.scrollTop();
                        //获取内容可滚动高度与滑块可滚动高度比率
                        contentBarRate = _this.getContentMaxMovableDistance() / _this.getSliderMaxMovableDistance();
                        //.scroll命名空间，防止停止doc事件
                        doc.on(‘mousemove.scroll‘, mousemoveHandler)
                            .on(‘mouseup.scroll‘, function () {
                                doc.off(‘.scroll‘);
                            })
                    });
                }
                return _this;
            },
            //监听滚动内容，同步滑块位置
            _bindContentScroll: function () {
                let _this = this;
                _this.$scrollContent.on(‘scroll‘, function () {
                    let sliderElement = _this.$scrollSlider && _this.$scrollSlider[0];
                    if (sliderElement) {
                        sliderElement.style.top = _this.getSliderPosition() + ‘px‘;
                    }
                })
                return _this;
            },
            //监听滚轮事件
            _bindMousewheel: function () {
                let _this = this;
                let scrollContent = _this.$scrollContent;
                scrollContent.bind(‘mousewheel DOMMouseScroll‘, function (contentEvent) {
                    contentEvent.preventDefault();
                    let originEvent = contentEvent.originalEvent;
                    //滚动幅度：wheelDelta 其他浏览器120， Firefox:3
                    let wheelRange = originEvent.wheelDelta ? -originEvent.wheelDelta / 120 : (originEvent.detail || 0) / 3;
                    let startScrollTop = scrollContent.scrollTop();
                    let wheelMoveDistance = wheelRange * _this.options.wheelStep;
                    _this.scrollTo(startScrollTop + wheelMoveDistance);
                });
                return _this;
            },
            //计算当前滑块位置
            getSliderPosition: function () {
                let _this = this;
                // 滑块移动距离/滑块可移动距离 = 内容移动距离/内容可移动距离
                let sliderMaxMovableDistance = _this.getSliderMaxMovableDistance();
                let contentMaxMovableDistance = _this.getContentMaxMovableDistance();
                let contentMoveDistance = _this.$scrollContent.scrollTop();
                let sliderMoveDistance = sliderMaxMovableDistance * contentMoveDistance / contentMaxMovableDistance;
                return Math.min(sliderMaxMovableDistance, sliderMoveDistance)
            },
            //获取内容可滚动高度 = 内容总高度 - 内容可视区高度
            getContentMaxMovableDistance: function () {
                let _this = this;
                let contentHeight = _this.$scrollContent.height();
                let contentTotalHeight = _this.$scrollContent[0].scrollHeight;
                return Math.max(contentHeight, contentTotalHeight) - contentHeight
            },
            // 获取滑块可移动高度 = 滚动条高度 - 滑块高度
            getSliderMaxMovableDistance: function () {
                let _this = this;
                let barHeight = _this.$scrollBar.height();
                let sliderHeight = _this.$scrollSlider.height();
                return barHeight - sliderHeight;
            },
            scrollTo: function (endScrollTop) {
                let _this = this;
                _this.$scrollContent.scrollTop(endScrollTop);
            }
        })
        win.CustomScrollBar = CustomScrollBar;
    })(window, document, jQuery)
    new CustomScrollBar({
        contentSelector: ‘.scroll-content‘,
        barSeletor: ‘.scroll-bar‘,
        sliderSelector: ‘.scroll-slider‘
    })
script>

html>