自定义图片滚动条-优快云博客

本文链接：https://blog.youkuaiyun.com/sweetllh/article/details/71375347
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>自定义滚动条</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
            width: 300px;
            height: 200px;
            overflow: hidden;
            border: 1px slid olive;
            padding-right: 15px;
            padding-bottom: 15px;
            margin: 100px auto;
            position: relative;
        }

        img{position: absolute; width: 730px;}

        #scroll-x{width: 315px;height: 15px;background: grey;position: absolute;left: 0;bottom: 0;}
        #scroll-y{width: 15px;height: 215px;background: grey;position: absolute;right: 0;top: 0;}

        #tag-x{width: 15px;height: 15px;background: orange;position: absolute;bottom: 0;left: 0;}
        #tag-y{width: 15px;height: 15px;background: orange;position: absolute;top: 0;right: 0;}

    </style>
</head>
<body>
    <div id="wrap">
        <img id="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493991722334&di=39eead9f568bc2d45ad858d4f7fa3922&imgtype=0&src=http%3A%2F%2Fimg.tuku.cn%2Ffile_big%2F201403%2F5683a05250db40b983f24a4e52f630f5.jpg"/>
        <div id="scroll-x">
            <div id="tag-x"></div>
        </div>
        <div id="scroll-y">
            <div id="tag-y"></div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var oWrap = document.getElementById('wrap');
    var oImg = document.getElementById('img');
    var oScrollX = document.getElementById('scroll-x');
    var oScrollY = document.getElementById('scroll-y');
    var oTagX = document.getElementById('tag-x');
    var oTagY = document.getElementById('tag-y');


    //左右
    //鼠标滚轮滚动
    if(oWrap.addEventListener){
        oWrap.addEventListener('mousewheel',oImgScroll,false);
        oWrap.addEventListener('DOMMouseScroll',oImgScroll,false);
    }else{
        oWrap.attachEvent('onmousewheel',oImgScroll,false);
    }

    function oImgScroll(e){
        e = e ||event;
        var speed = 10;
        var isUp;
        if(e.wheelDelta){ //IE Chrome
            isUp = e.wheelDelta > 0 ? true : false;
        } else{ //FF
            isUp = e.dedail < 0 ? true : false;
        }

        if(isUp){
            speed = -speed;
        }

        var left = oTagX.offsetLeft + speed;
        if(left < 0){
                left = 0;
            } else if(left > oScrollX.offsetWidth - 15 - oTagX.offsetWidth){
                left = oScrollX.offsetWidth - 15 - oTagX.offsetWidth;
            }
            oTagX.style.left = left + 'px';
            var scale = left/(oScrollX.offsetWidth - oTagX.offsetWidth-15);
            var nImgLeft = (oImg.offsetWidth - oWrap.offsetWidth-15+2)*scale;
            oImg.style.left = -nImgLeft + 'px';
    }

    //点击滚动
    oTagX.onmousedown = function(e){
        e = e ||event;
        var disX = e.clientX - oTagX.offsetLeft;
        document.onmousemove = function(e){
            e = e ||event;
            var left = e.clientX - disX;
            if(left < 0){
                left = 0;
            } else if(left > oScrollX.offsetWidth - 15 - oTagX.offsetWidth){
                left = oScrollX.offsetWidth - 15 - oTagX.offsetWidth;
            }
            oTagX.style.left = left + 'px';
            var scale = left/(oScrollX.offsetWidth - oTagX.offsetWidth-15);
            var nImgLeft = (oImg.offsetWidth - oWrap.offsetWidth-15+2)*scale;
            oImg.style.left = -nImgLeft + 'px';
            return false;//去除默认样式
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
        if(e.preventDefault){
            e.preventDefault();
        }
    };

    //上下点击滚动
    oTagY.onmousedown = function(e){
        var e = e ||event;
        var disY = e.clientY - oTagY.offsetTop;
        oTagY.onmousemove = function(e){
            var e = e ||event;
            var top = e.clientY - disY;
            if (top < 0){
                top = 0;
            } else if(top > oScrollY.offsetHeight - oTagY.offsetHeight-15){
                top = oScrollY.offsetHeight - oTagY.offsetHeight -15;
            }
            oTagY.style.top = top + 'px';
            var scale = top/(oScrollY.offsetHeight - oTagY.offsetHeight-15);
            var oImgTop = scale *(oImg.offsetHeight - oWrap.offsetHeight-15+2);
            oImg.style.top = -oImgTop + 'px';
            return false;
        }
        oTagY.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
        if(e.preventDefault){
            e.preventDefault();
        }
    }

</script>
</html>
js实现自定义滚动条
