JS滚轮控制舵机-自定义滚动条。

最新推荐文章于 2021-06-21 04:19:53 发布

kenick

最新推荐文章于 2021-06-21 04:19:53 发布

阅读量236

点赞数

分类专栏：前端文章标签：自定义滚轮

本文链接：https://blog.csdn.net/leadseczgw01/article/details/86008148

版权

前端专栏收录该内容

39 篇文章 1 订阅

订阅专栏

1.页面效果

2.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自定义滚动条</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        user-select: none;
    }
    #scroll {
        width: 25px;
        position: relative;
    }
    #bar {
        width: 25px;
        height: 20px;
        background-color: purple;
        border-radius: 25px;
        position: absolute;
        top: 0;
    }
</style>
<body>
<div style="margin-left: 100px;">松开</div>
<div id="scroll" style="height: 100px;margin-left:100px;">
    <div id="bar"></div>
</div>
<div style="margin-left: 100px;margin-top: 25px;">闭合</div>
<div style="margin-left: 100px;">
    舵机1:<label id="position1">100</label>
</div>
<script>
    var oBar = document.getElementById("bar");
    var position1 = document.getElementById("position1");
    oBar.style.height = "25px";
    oBar.onmousedown = function (e) {
        var cY = parseInt(e.clientY);
        var oH = parseInt(this.offsetTop);
        var spaceY = cY - oH;
        document.onmousemove = function (e) {
            // 当前纵坐标
            var nowY = parseInt(e.clientY);
            var y = nowY - spaceY;

            // 坐标越界处理
            y = y < 0 ? y = 0 : y;
            y = y > 100 ? 100 : y;

            oBar.style.top = y + "px";
            position1.innerHTML = y;
        }
    }
    document.onmouseup = function (e) {
        console.log(e.clientY);
        document.onmousemove = null;
    }
    oBar.style.top = "50px";

    // 滚轮
    //判断鼠标滚轮滚动方向
    if (window.addEventListener)//FF,火狐浏览器会识别该方法
        window.addEventListener('DOMMouseScroll', wheel, false);
    window.onmousewheel = document.onmousewheel = wheel;//W3C
    //统一处理滚轮滚动事件
    function wheel(event){
        var delta = 0;
        if (!event) event = window.event;
        if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
            delta = event.wheelDelta/120;
            if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
        } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
            delta = -event.detail/3;
        }
        if (delta)
            handle(delta);
    }
    //上下滚动时的具体处理函数
    function handle(delta) {
        var topNum = oBar.style.top.substring(0,oBar.style.top.length-2);
        topNum =parseInt(topNum) + (-delta);
        if(topNum > 100){
            topNum = 100;
        }
        if(topNum < 0){
            topNum = 0;
        }
        position1.innerHTML = topNum;
        oBar.style.top = topNum + "px";
    }
</script>
</body>
</html>

kenick

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS滚轮控制舵机-自定义滚动条。

1.页面效果2.代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;自定义滚动条&lt;/title&gt;&lt;/head&gt;&lt;style&gt; * { ma
复制链接

扫一扫