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>

应用

下面来介绍通过滚动条实现的几个应用

数字加减

通过移动滚动条来实现数字的加减。比例关系为：

滚动条已移动距离/滚动条可移动距离= 数字当前值/数字最大值

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！