javascript动画系列之模拟滚动条

前面的话

当元素内容溢出元素尺寸范围时，会出现滚动条。但由于滚动条在各浏览器下表现不同，兼容性不好。所以，模拟滚动条也是很常见的应用。本文将详细介绍滚动条模拟

原理介绍

滚动条模拟实际上和元素模拟拖拽类似。仅仅通过范围限定，使元素只可以在单一方向上拖拽

<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>