使用js实现超出的内容可以左右滚动 |
您所在的位置：网站首页 › ipad鼠标滚轮怎么设置左右滑动 › 使用js实现超出的内容可以左右滚动 |
使用js实现超出的内容可以左右滚动
|
作为一只菜鸟，希望能够通过记录自己遇到的问题提升自身能力。(第一篇文章，有哪里写的不好的请各位大神多多指教) 最近遇到一个新的需求（项目不方便公开就以纯文字的形式表达下），因为页面中某个模块的内容过多超出了定义好的范围，所以需要对超出的内容进行一个处理。类似于下图所示： 当时看到这个需求，大概确定了处理的方向： 隐藏，或者是只显示足够多的内容（这个就不多做说明了）做一个滚动处理那么说起滚动处理又有 自动滚动 和 手动滚动 两种方式。在这里说一下我大概的思路 自动滚动：结合使用定位和计时器两种方式。在计时器内持续改变内容相对于盒子的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) this.style.left='150px'; }; } });第三步： 监听鼠标mouseup事件，当鼠标抬起时将flag归0，达到鼠标按下才能触发onmousemove方法的效果。 box.mouseup(function(){ index=0; }); // 以防止鼠标移动到盒子外 body.mouseup(function(){ index=0; });具体示例 相关链接： https://blog.csdn.net/rovast/article/details/79872111 https://blog.csdn.net/llllvvv/article/details/79928707 方法二：使用鼠标滚轮代替滚动条滚动具体实现： 通过mousewheel事件监听滚轮，改变滚动条scrollLeft值实现滚动。需要注意的是由于不同的浏览器所兼容的函数不同，所以需要首先判断浏览器类型，再按照不同浏览器写不同的函数。 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) }具体示例 相关链接： https://blog.csdn.net/chenyinquan9211/article/details/80603721 补充1： “event.clientX” 获取的是当前鼠标相较于盒子的位置。关于鼠标位置的属性大概就 screenX 和screenY、clientX和clientY、pageX和pageY、offsetX和offsetY这几种，如图所示： 补充2： “mousewheel” 事件中的 “event.wheelDelta” 属性值：滚轮滚一次的值。如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动。 “DOMMouseScroll” 事件中的 “event.detail” 属性值：滚轮滚一次的值。方向与 “event.wheelDelta” 正好相反。 |
参考说明【本文地址】
今日新闻 |
推荐新闻 |