标签：function false 自定义 top js 滚动条 var oBar offsetHeight

 <div class="wrap">
        <div class="content"></div>
        <div class="scroll">
            <div class="bar"></div>
        </div>
    </div>

* {
            margin: 0;
            padding: 0;
            user-select: none;
        }
        
        .wrap {
            overflow: hidden;
            position: relative;
            width: 400px;
            height: 600px;
            background-color: #f1f1f1;
            margin: 10px auto;
            box-shadow: 0 0 10px red;
        }
        
        .content {
            position: absolute;
            left: 0;
            top: 0;
            width: 380px;
            padding: 10px;
            line-height: 30px;
            text-indent: 2em;
        }
        
        .scroll {
            position: absolute;
            top: 0;
            right: 0;
            width: 16px;
            height: 600px;
            background-color: #ccc;
        }
        
        .bar {
            position: absolute;
            width: 16px;
            border-radius: 10px;
            background-color: #333;
        }

var oWrap = document.querySelector('.wrap');
        var oContent = document.querySelector('.content');
        var oScroll = document.querySelector('.scroll');
        var oBar = document.querySelector('.bar');
        var rate = 0;
        //初始函数
        initSCroll();

        function initSCroll() {
            //初始bar的高度；
            oBar.style.height = oWrap.offsetHeight / oContent.offsetHeight * oScroll.offsetHeight + 'px';
            //内容展示比例
            rate = (oContent.offsetHeight - oWrap.offsetHeight) / (oScroll.offsetHeight - oBar.offsetHeight);

        };
        var eventTypeMap = {
            isDown: false,
            startPos: {
                y: 0,
                top: 0
            },
            'mousedown': function(e) {
                this.isDown = true;
                this.startPos.y = e.clientY;
                this.startPos.top = oBar.offsetTop;
            },
            'mousemove': function(e) {
                if (!this.isDown) {
                    return false;
                }
                var _y = e.clientY - this.startPos.y + this.startPos.top;
                scrollBar(_y);
            },
            'mouseup': function(e) {
                if (!this.isDown) {
                    return false;
                }
                this.isDown = false;
            },
            'mousewheel': function(e) {
                var _y = oBar.offsetTop;
                if (e.wheelDelta > 0) {
                    _y -= 10;
                } else {
                    _y += 10;
                }
                scrollBar(_y);
            }

        };
        //事件
        oBar.addEventListener('mousedown', eventSort, false);
        document.addEventListener('mousemove', eventSort, false);
        document.addEventListener('mouseup', eventSort, false);
        oBar.addEventListener('mousewheel', eventSort, false);
        //事件分流
        function eventSort(e) {
            if (eventTypeMap[e.type] && typeof eventTypeMap[e.type] === 'function') {
                eventTypeMap[e.type](e);
            }
        };

        function scrollBar(_y) {
            _y = Math.max(0, _y);
            _y = Math.min(_y, oScroll.offsetHeight - oBar.offsetHeight);
            oBar.style.top = _y + 'px';
            oContent.style.marginTop = -_y * rate + 'px';
        }

标签：function,false,自定义,top,js,滚动条,var,oBar,offsetHeight
来源： https://www.cnblogs.com/crazy-rock/p/13899503.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。