The technique of simulating scroll bar _javascript in JavaScript animation series

Front.

Scroll bars appear when element content overflows the element size range. But because the scroll bar in each browser performance is different, the compatibility is not good. Therefore, the simulation scroll bar is also a very common application. This article will introduce the scroll bar simulation in detail

Principle Introduction

the scroll bar simulation is actually similar to the element simulation drag. only by limiting the scope so that elements can be dragged in a single direction

 <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);p osition: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;
 Frees global Capture if (test.releasecapture) {test.releasecapture ();}
 //ie8-browser to block default behavior if (test.setcapture) {test.setcapture ();}
Block default behavior return false; } </script> 

You can implement both horizontal and vertical scroll bars

by encapsulating the above code as a function

<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);p osition: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);p osition: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 axis direction if (str = = ' x ') {var disx = E.clientx-this.offsetleft;
  Otherwise the y-axis}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;
  Frees global Capture if (obj.releasecapture) {obj.releasecapture ();}
  //ie8-browser to block default behavior if (obj.setcapture) {obj.setcapture ();}
 Block default behavior return false;
} scrollbar (Test1); ScrollBar (Test2, ' x ') </script>

Application

Here are some of the applications that are implemented through the scroll bar

Digital plus minus

You can add and subtract numbers by moving the scroll bar. The proportional relationship is:

scroll bar moved distance/scroll bar removable distance = number Current/number maximum

<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);p osition: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;
  The proportional coefficient var ratio;
   X axis direction if (str = = ' x ') {var disx = E.clientx-this.offsetleft;
  Ratio = max/(this.parentnode.offsetwidth-this.offsetwidth);
   Otherwise the y-axis}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;
  Frees global Capture if (obj.releasecapture) {obj.releasecapture ();}
  //ie8-browser to block default behavior if (obj.setcapture) {obj.setcapture ();}
 Block default behavior return false;
} scrollbar (Test, ' X ', 100); </script>

Element dimensions

Drag the scroll bar to change the element size to change the width of an element . The proportional relationship is:

scroll bar moved distance/scroll bar removable distance = element current width/element maximum width

<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);p osition: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;
  The proportional coefficient var ratio;
   X axis direction if (str = = ' x ') {var disx = E.clientx-this.offsetleft;
  Ratio = max/(this.parentnode.offsetwidth-this.offsetwidth);
   Otherwise the y-axis}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;
  Frees global Capture if (obj.releasecapture) {obj.releasecapture ();}
  //ie8-browser to block default behavior if (obj.setcapture) {obj.setcapture ();}
 Block default behavior return false;
} scrollbar (Test, ' X ', 100); </script>

Content scrolling

Drag the scroll bar to achieve content scrolling, proportional to:

scroll bar moved distance/scroll bar removable distance = content moved distance/content removable distance

<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);p osition: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;" > Test Text <br> Test text <br> Test text <br> Test text <br> Test text <br> Test text <br> Test text <br> Test Text < br> Test Text <br> Test text <br> Test text <br> Test text <br></div></span> <script> function
 ScrollBar (OBJ,STR) {var max = result.offsetheight-resultin.offsetheight;
  Obj.onmousedown = function (e) {e = e | | event;
  var that = this; Proportional coefficient var RAtio;
   X axis direction if (str = = ' x ') {var disx = E.clientx-this.offsetleft;
  Ratio = max/(this.parentnode.offsetwidth-this.offsetwidth);
   Otherwise the y-axis}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;
  Frees global Capture if (obj.releasecapture) {obj.releasecapture ();} }//ie8-browser to block default behavior if (obj.setcapture) {obj.setcapture ();}
 Block default behavior return false;
} scrollbar (test, ' Y '); </script>

Above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!