作為一只菜鳥，希望能夠通過記錄自己遇到的問題提升自身能力，(第一篇文章，有哪里寫的不好的請各位大神多多指教)
最近遇到一個新的需求（專案不方便公開就以純文字的形式表達下），因為頁面中某個模塊的內容過多超出了定義好的范圍，所以需要對超出的內容進行一個處理，類似于下圖所示：
當時看到這個需求，大概確定了處理的方向：
- 隱藏，或者是只顯示足夠多的內容（這個就不多做說明了）
- 做一個滾動處理
那么說起滾動處理又有 自動滾動 和 手動滾動 兩種方式，在這里說一下我大概的思路
- 自動滾動：結合使用定位和計時器兩種方式，在計時器內持續改變內容相對于盒子的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;
});
具體示例
相關鏈接：
https://blog.csdn.net/rovast/article/details/79872111
https://blog.csdn.net/llllvvv/article/details/79928707
方法二：使用滑鼠滾輪代替滾動條滾動
具體實作：
通過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>
具體示例
相關鏈接：
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” 正好相反，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/166620.html
標籤：其他