使用js实现超出的内容可以左右滚动

最新推荐文章于 2024-01-21 13:39:55 发布

努力的布鲁克

最新推荐文章于 2024-01-21 13:39:55 发布

阅读量4.1k

点赞数 7

分类专栏：问题集锦文章标签： js

本文链接：https://blog.csdn.net/qq_45399146/article/details/108976853

版权

问题集锦专栏收录该内容

2 篇文章 0 订阅

订阅专栏

作为一只菜鸟，希望能够通过记录自己遇到的问题提升自身能力。(第一篇文章，有哪里写的不好的请各位大神多多指教)

最近遇到一个新的需求（项目不方便公开就以纯文字的形式表达下），因为页面中某个模块的内容过多超出了定义好的范围，所以需要对超出的内容进行一个处理。类似于下图所示：
在这里插入图片描述

当时看到这个需求，大概确定了处理的方向：

隐藏，或者是只显示足够多的内容（这个就不多做说明了）
做一个滚动处理

那么说起滚动处理又有自动滚动和手动滚动两种方式。在这里说一下我大概的思路

自动滚动：结合使用定位和计时器两种方式。在计时器内持续改变内容相对于盒子的left值，当内容移动到结尾部分时再重新将left值归0。
手动滚动：使用鼠标拖动内容，这种和自动滚动的方式差不多，也是通过改变定位属性的left值实现；使用鼠标滚轮滚动内容，这个是通过监听mousewheel事件，然后改变滚动条属性的scrollLeft值实现。

因为项目并不是很实用自动滚动来处理，所以没有去实践做出来，在这里也就只是着重说一下手动滚动了。（以后有机会再尝试弄自动滚动吧 ^ - ^）

方法一：使用鼠标拖动内容进行滚动

具体实现：
通过定义一个flag，结合鼠标事件mousedown、mousemove、mouseup和定位，改变内容定位属性的left值实现。
第一步：监听鼠标mousedown事件，当鼠标按下时保存当前鼠标相较于盒子的位置和内容的left值，相减后得出为移动前的初始位置。

box.mousedown(function(){
    index=1;              //鼠标按下才能触发onmousemove方法
    var x=event.clientX;     //鼠标点击的坐标值，x
    var left= this.style.left;
    left=left.substr(0,left.length-2);   //去掉px
    x1=parseInt(x-left);
});

第二步：监听鼠标mousemove事件，当鼠标移动时用当前鼠标相较于盒子的位置减去初始位置的值，就可以得到我们内容最终移动的距离。

box.mousemove(function(){
    if(index===1){
        this.style.left=event.clientX-x1+'px';
        // 小于0的时候直接归0
        if(this.style.left.substr(0,this.style.left.length-2)<0){
            this.style.left=0;
        };
        // 超出规定长度后直接等于规定的长度
        if(this.style.left.substr(0,this.style.left.length-2)>150){
            this.style.left='150px';
        };
    }
});

第三步：监听鼠标mouseup事件，当鼠标抬起时将flag归0，达到鼠标按下才能触发onmousemove方法的效果。

box.mouseup(function(){
    index=0;
});
// 以防止鼠标移动到盒子外
body.mouseup(function(){
    index=0;
});

具体示例

方法二：使用鼠标滚轮代替滚动条滚动

具体实现：
通过mousewheel事件监听滚轮，改变滚动条scrollLeft值实现滚动。需要注意的是由于不同的浏览器所兼容的函数不同，所以需要首先判断浏览器类型，再按照不同浏览器写不同的函数。

  <script>
    let box = document.querySelector("#box")
    // 由于不同的浏览器所兼容的函数不同，所以需要首先判断浏览器类型，再按照不同浏览器写不同的函数
    let explorer =navigator.userAgent;
    if(explorer.indexOf("Firefox") >= 0){
      box.addEventListener("DOMMouseScroll",function(){
        //计算鼠标滚轮滚动的距离
        // event.detail * 40 代表幅度(速度),40可以更改
        box.scrollLeft += event.detail * 40;
        //阻止浏览器默认方法
        event.preventDefault();
      }, false)
    }else{
      box.addEventListener("mousewheel",function(){
        //计算鼠标滚轮滚动的距离
        // -event.wheelDelta / 2 代表幅度(速度),2可以更改
        let v = -event.wheelDelta / 2;
        box.scrollLeft += v;
        //阻止浏览器默认方法
        event.preventDefault();
      }, false)
    }
  </script>

具体示例

补充1：
“event.clientX” 获取的是当前鼠标相较于盒子的位置。关于鼠标位置的属性大概就 screenX 和screenY、clientX和clientY、pageX和pageY、offsetX和offsetY这几种，如图所示：
在这里插入图片描述
参考说明

补充2：
“mousewheel” 事件中的 “event.wheelDelta” 属性值：滚轮滚一次的值。如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动。
“DOMMouseScroll” 事件中的 “event.detail” 属性值：滚轮滚一次的值。方向与 “event.wheelDelta” 正好相反。