当元素内容溢出元素尺寸范围时，会出现滚动条。但由于滚动条在各浏览器下表现不同，兼容性不好。所以，模拟滚动条也是很常见的应用。本文将详细介绍滚动条模拟
原理介绍
滚动条模拟实际上和元素模拟拖拽类似。仅仅通过范围限定，使元素只可以在单一方向上拖拽
<div> <div></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> <div></div> </div> <div> <div></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> <div></div> </div> <span>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> <div></div> </div> <span></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>
内容滚动
通过拖动滚动条来实现内容滚动，比例关系为：
滚动条已移动距离/滚动条可移动距离= 内容已移动距离/内容可移动距离