js怎样处理双滚动条，左边滚动条滑动，右边的滚动条也会跟着动，用户体验会非常不好

最新推荐文章于 2024-05-30 13:59:14 发布

xiaodanda

最新推荐文章于 2024-05-30 13:59:14 发布

阅读量1.2k

点赞数

文章标签： javascript layui 前端 css html

本文链接：https://blog.csdn.net/xiaodanda/article/details/125976384

版权

   //拖动事件
        scrollTrack.onmousedown = function(e){
    //    // 处理双滚动条冲突  // 滚动条消失
      var mo=function(e){e.preventDefault();};
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
            //鼠标滚动条中的高度 = 鼠标的Y轴坐标 - 滚动条距离Body的高度
            var mouseY = e.pageY - scrollTrack.offsetTop 
            //滚动条在轨道中的偏移距离 =  鼠标的Y轴坐标 - 轨道距离body的高度 - 鼠标在滚动条中的高度
            var Y = e.pageY - scroll.offsetTop -mouseY
            //滚动条的最大滚动距离 = 轨道高度 - 滚动条高度 
            var maxY = scroll.offsetHeight - scrollTrack.offsetHeight;
            document.onmousemove = function(e){
                Y = e.pageY - scroll.offsetTop  -mouseY
                if(Y < 0){
                    Y = 0
                }
                if(Y > maxY){
                    Y = maxY
                }
                //设置滚动条在轨道中的距离上方的距离  
                scrollTrack.style.marg