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

最新推荐文章于 2023-09-17 11:29:22 发布

原创最新推荐文章于 2023-09-17 11:29:22 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #layui #前端 #css #html

本文探讨了在JavaScript中处理双滚动条同步的问题，通过监听鼠标拖动事件，当鼠标移动到滚动框时隐藏页面右侧滚动条，使用`preventDefault()`阻止默认滑动行为。在函数结束时，恢复滚动条显示，提升用户体验。

   //拖动事件
        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.marginTop = Y +'px'
                //内容的滚动距离 = 滚动条的滚动距离 / 最大滚动距离  * 内容最大滚动距离
                content.scrollTop = Y/maxY*(content.scrollHeight - content.offsetHeight)
            }            
        }


  // 处理双滚动条冲突
    box.onmouseleave = function(){
    //   /***取消滑动限制***/
        var mo=function(e){
            e.preventDefault();
        };
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove",mo,false);
    }

以鼠标拖动事件为例，我遇到这种情况的思路是当鼠标移动到页面滚动框时隐藏页面右边的滚动条，在函数开始的时候放入这段滚动条消失的代码，

// // 处理双滚动条冲突 // 滚动条消失

var mo=function(e){e.preventDefault();};

document.body.style.overflow='hidden';

document.addEventListener("touchmove",mo,false);//禁止页面滑动

函数完成后放入下列代码

// 处理双滚动条冲突

box.onmouseleave = function(){

// /***取消滑动限制***/

var mo=function(e){

e.preventDefault();

};