手写滚动条（仅完成鼠标滚动事件，不包含拖动滚动的功能）

最近看到别人项目中的导航栏和页面内容的滚动分离，单独生效的滚动条，正好最近不忙就研究了一下，实现的方法比较LOW（简单粗暴），就是监听鼠标位置，计算是非在允许滚动的范围，在执行计算，根据滚动的上下，就算出相应的比例，给要滚动的内容价格top属性的值。
直接提供一段可以直接运行的代码，实现方法。实际应用需要自己修改样式，这个的动画效果都没做，最好是滚动时滚动条显示 停止滚动滚动条消失，也能不让别人发现这个滚动条不能托转， 需要添加拖拽事件也很简单，方法例有监听鼠标的方法，就是需要自己计算位置重新赋值。

样式

标签跟js

</div>
    
    <label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
    <label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/>

<script>
    //1.根据内容的大小，计算滚动条的高度
    function my$(id) {
        return document.getElementById(id);
    }
    function myc$(id) {
        return document.getElementsByClassName(id);
    }
    function me$(id){
        return document.querySelectorAll(id)
    }

    var box = my$('box');
    var content = my$('content');
    var scroll = my$('scroll');
    var bar = my$('bar');
    var cbar = myc$("bar");

    //当内容高度<box高度时，没有滚动条显示
    // var barHeight = 0;
    // if (content.scrollHeight > box.clientHeight) {
    //     barHeight = box.clientHeight / content.scrollHeight * scroll.clientHeight;
    // }
    // bar.style.height = barHeight + "px";

    // 计算滚动距离赋值的变量
    var num = 0,bartop=0;

    // 计算滚动生效的最大范围（盒子的right和bottom)  
    // offsetHeight，这个是显示高度，也会是页面能显示的部分
    var maxX = box.offsetWidth + box.offsetLeft;
    var maxY = box.offsetHeight + box.offsetTop

    // 计算滚动的最大值，盒子还有一个属性scrollHeight，这个高度是盒子真实高度，包括隐藏起来的部分
    var maxNum = (((box.scrollHeight-box.offsetHeight)/box.offsetHeight)*100).toFixed(0);
    var once = maxNum/50

    // 最大滚动距离
    var barMax = scroll.clientHeight - bar.scrollHeight;
    var baronce = barMax/50
    console.log(barMax,baronce,bar.clientHeight,bar.offsetHeight,bar.scrollHeight)

    
    var scrollFunc=function(e){
        ee=e || window.event;

        // 鼠标的位置
        var lateX = getMousePos().x;
        var lateY = getMousePos().y;
        
        // 滚动事件生效的位置（盒子在页面的位置（left和top，left、top加宽、高的四个值）
        if( (lateX >= box.offsetLeft && lateX >= box.offsetTop) 
            && (lateX <= maxX && lateY <= maxY) ){
                // console.log("有效")
                // 判断滚动事件的的方向（上或者下）
                if(e.deltaY>0){
                    // console.log("-")

                    num > -maxNum && num <= 0 
                    ? num = (Number(num) - once).toFixed(2)
                    : ""

                    bartop < barMax && bartop >= 0
                    ? bartop = (Number(bartop)+baronce).toFixed(2)
                    : ""
                }else{
                    // console.log("+")
                    
                    num >= -maxNum && num < 0 
                    ? num = (Number(num) + once).toFixed(2)
                    : ""

                    bartop <= barMax && bartop > 0
                    ? bartop = (Number(bartop)-baronce).toFixed(2)
                    : ""
                }
                // console.log(num,bartop)
                content.style.top = num + "%";
                bar.style.top = bartop + "px"
        }else{
            // console.log("不在有效范围")
        }

        
    }
    /*注册事件*/
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',scrollFunc,false);
    }//W3C
    window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
    

    // // 获取鼠标在页面的位置
    function getMousePos(event) {
        var e = event || window.event;
        // console.log(e.clientX,e.clientY)
        return { "x": e.clientX, "y": e.clientY };
    }
</script>

才发现一个系统滚动条的样式重写：https://www.seotest.cn/jishu/36090.html

菜鸡页面仔，记录前端辛路每一天！！！！！！！！！！！