前面的話
當元素內容溢出元素尺寸范圍時，會出現滾動條。但由于滾動條在各瀏覽器下表現不同，兼容性不好。所以，模擬滾動條也是很常見的應用。本文將詳細介紹滾動條模擬
原理介紹
滾動條模擬實際上和元素模擬拖拽類似。僅僅通過范圍限定，使元素只可以在單一方向上拖拽
<div id="box" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;"> <div id="test" style="height: 60px;width: 16px;background-color:#555;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div></div><script>test.onmousedown = function(e){ e = e || event; var that = this; var disY = e.clientY - this.offsetTop; document.onmousemove = function(e){ e = e || event; var T = e.clientY - disY; if(T < 0){T = 0;} var TMax = parseInt(box.style.height) - that.offsetHeight; if(T > TMax){T = TMax;} that.style.top = T + 'px'; } document.onmouseup = function(){ document.onmousemove = null; //釋放全局捕獲 if(test.releaseCapture){test.releaseCapture();} } //IE8-瀏覽器阻止默認行為 if(test.setCapture){test.setCapture();} //阻止默認行為 return false;}</script>通過將上面代碼封裝成函數，可以實現橫向和縱向兩種滾動條
<div id="box1" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;"> <div id="test1" style="height: 60px;width: 16px;background-color:#555;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div></div><div id="box2" style="height: 16px;width: 200px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;"> <div id="test2" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div></div><script>function scrollbar(obj,str){ obj.onmousedown = function(e){ e = e || event; var that = this; //x軸方向 if(str == 'x'){ var disX = e.clientX - this.offsetLeft; //否則為y軸方向 }else{ var disY = e.clientY - this.offsetTop; } document.onmousemove = function(e){ e = e || event; if(str == 'x'){ var L = e.clientX - disX; if(L < 0){L = 0;} var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth; if(L > LMax){L = LMax;} that.style.left = L + 'px'; }else{ var T = e.clientY - disY; if(T < 0){T = 0;} var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight; if(T > TMax){T = TMax;} that.style.top = T + 'px'; } } document.onmouseup = function(){ document.onmousemove = null; //釋放全局捕獲 if(obj.releaseCapture){obj.releaseCapture();} } //IE8-瀏覽器阻止默認行為 if(obj.setCapture){obj.setCapture();} //阻止默認行為 return false; } }scrollbar(test1);scrollbar(test2,'x')</script>應用
下面來介紹通過滾動條實現的幾個應用
數字加減
通過移動滾動條來實現數字的加減。比例關系為：
滾動條已移動距離/滾動條可移動距離= 數字當前值/數字最大值
<div id="box" style="height: 16px;width: 200px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;"> <div id="test" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div></div><span id="result">0</span><script>function scrollbar(obj,str,max){ obj.onmousedown = function(e){ e = e || event; var that = this; //比例系數 var ratio; //x軸方向 if(str == 'x'){ var disX = e.clientX - this.offsetLeft; ratio = max/(this.parentNode.offsetWidth - this.offsetWidth); //否則為y軸方向 }else{ var disY = e.clientY - this.offsetTop; ratio =max/(this.parentNode.offsetHeight - this.offsetHeight); } document.onmousemove = function(e){ e = e || event; if(str == 'x'){ var L = e.clientX - disX; if(L < 0){L = 0;} var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth; if(L > LMax){L = LMax;} that.style.left = L + 'px'; result.innerHTML = Math.round(ratio * L); }else{ var T = e.clientY - disY; if(T < 0){T = 0;} var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight; if(T > TMax){T = TMax;} that.style.top = T + 'px'; result.innerHTML = Math.round(ratio * T); } } document.onmouseup = function(){ document.onmousemove = null; //釋放全局捕獲 if(obj.releaseCapture){obj.releaseCapture();} } //IE8-瀏覽器阻止默認行為 if(obj.setCapture){obj.setCapture();} //阻止默認行為 return false; } }scrollbar(test,'x',100);</script>元素尺寸
通過拖動滾動條來實現元素尺寸的變化，以改變元素寬度為例。比例關系為：
滾動條已移動距離/滾動條可移動距離= 元素當前寬度/元素最大寬度
<div id="box" style="height: 16px;width: 200px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;"> <div id="test" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div></div><span id="result" style="width: 1px;height: 50px;background-color:pink;display:inline-block;"></span><script>function scrollbar(obj,str,max){ obj.onmousedown = function(e){ e = e || event; var that = this; //比例系數 var ratio; //x軸方向 if(str == 'x'){ var disX = e.clientX - this.offsetLeft; ratio = max/(this.parentNode.offsetWidth - this.offsetWidth); //否則為y軸方向 }else{ var disY = e.clientY - this.offsetTop; ratio =max/(this.parentNode.offsetHeight - this.offsetHeight); } document.onmousemove = function(e){ e = e || event; if(str == 'x'){ var L = e.clientX - disX; if(L < 0){L = 0;} var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth; if(L > LMax){L = LMax;} that.style.left = L + 'px'; result.style.width = Math.round(ratio * L) + 'px'; }else{ var T = e.clientY - disY; if(T < 0){T = 0;} var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight; if(T > TMax){T = TMax;} that.style.top = T + 'px'; result.style.width = Math.round(ratio * T) + 'px'; } } document.onmouseup = function(){ document.onmousemove = null; //釋放全局捕獲 if(obj.releaseCapture){obj.releaseCapture();} } //IE8-瀏覽器阻止默認行為 if(obj.setCapture){obj.setCapture();} //阻止默認行為 return false; } }scrollbar(test,'x',100);</script>內容滾動
通過拖動滾動條來實現內容滾動，比例關系為：
滾動條已移動距離/滾動條可移動距離= 內容已移動距離/內容可移動距離
<div id="box" style="height: 200px;width: 16px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;vertical-align:middle;"> <div id="test" style="height: 60px;width: 16px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div></div><span id="result" style="width: 100px;height: 200px;background-color:pink;display:inline-block;line-height:30px;vertical-align:middle;position:relative;overflow:hidden;"><div id="resultIn" style="position:absolute;top:0;">測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br></div></span><script>function scrollbar(obj,str){ var max = result.offsetHeight - resultIn.offsetHeight; obj.onmousedown = function(e){ e = e || event; var that = this; //比例系數 var ratio; //x軸方向 if(str == 'x'){ var disX = e.clientX - this.offsetLeft; ratio = max/(this.parentNode.offsetWidth - this.offsetWidth); //否則為y軸方向 }else{ var disY = e.clientY - this.offsetTop; ratio =max/(this.parentNode.offsetHeight - this.offsetHeight); } document.onmousemove = function(e){ e = e || event; if(str == 'x'){ var L = e.clientX - disX; if(L < 0){L = 0;} var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth; if(L > LMax){L = LMax;} that.style.left = L + 'px'; resultIn.style.top = Math.round(ratio * L) + 'px'; }else{ var T = e.clientY - disY; if(T < 0){T = 0;} var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight; if(T > TMax){T = TMax;} that.style.top = T + 'px'; resultIn.style.top = Math.round(ratio * T) + 'px'; } } document.onmouseup = function(){ document.onmousemove = null; //釋放全局捕獲 if(obj.releaseCapture){obj.releaseCapture();} } //IE8-瀏覽器阻止默認行為 if(obj.setCapture){obj.setCapture();} //阻止默認行為 return false; } }scrollbar(test,'y');</script>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持VeVb武林網！
新聞熱點
疑難解答
