JS simulation simple scroll bar effect code (with demo source) _javascript Tips

This paper illustrates the method of JS simulating simple scroll bar effect. Share to everyone for your reference, specific as follows:

Use JS to simulate the scroll bar. Easy mode, similar to the common scroll bar on the phone.

The effect is as follows:

The JS code is as follows:

var scrollmoveobj = null, Scrollpagey = 0, scrolly = 0;
var scrolldivlist = new Array ();
Obj needs to add scroll bar object w scrollbar width classname scroll bar style name//obj element must specify height and set Overflow:hidden; 
To be compatible IE6 must specify Overflow:hidden for the obj element;
  function Jsscroll (obj, W, className) {if (typeof (obj) = = ' string ') {obj = document.getElementById (obj);
  ////when content does not exceed current height, do not add scroll bar if (!obj | | obj.scrollheight <= obj.clientheight | | obj.clientheight = 0) {return; } obj.scrollbarwidth = w| |
  6;
  Obj.style.overflow = ' hidden ';
  Obj.scrollbar = document.createelement (' div ');
  Document.body.appendChild (Obj.scrollbar);
  Obj.scrollbarindex = document.createelement (' div ');
  Obj.scrollBar.appendChild (Obj.scrollbarindex);
  obj.scrollBar.style.position = ' absolute ';
  obj.scrollBarIndex.style.position = ' absolute '; Obj.scrollBar.className = ClassName | |
  '';
    if (!classname) {obj.scrollBar.style.backgroundColor = ' #ddd ';
  Obj.scrollBarIndex.style.backgroundColor = ' #aaa ';
 } scrolldivlist.push (obj); Scrollresetsize (obj);
  Use the mouse wheel to scroll obj.scrollBar.scrollDiv = obj;
  Obj.scrollBarIndex.scrollDiv = obj;
  Obj.onmousewheel = Scrollmove;
  Obj.scrollBar.onmousewheel = Scrollmove;
  Obj.scrollBarIndex.onmousewheel = Scrollmove;
    Drag the scroll bar to scroll obj.scrollBarIndex.onmousedown = function (evt) {evt = EVT | | event;
    Scrollpagey = Evt.clienty;
    scrolly = This.scrollDiv.scrollTop;
    Isscrollmove = true;
    Document.body.onselectstart = function () {return false};
    Scrollmoveobj = This.scrolldiv;
    if (This.scrollDiv.scrollBar.className = = ") {This.scrollDiv.scrollBarIndex.style.backgroundColor = ' #888 ';
  return false; When the page size changes, the scroll bar position is recalculated window.onresize = function () {for (var i=0; i<scrolldivlist.length; i++) {scrollresets
  Ize (Scrolldivlist[i]);
    Calculate the scroll bar position function scrollresetsize (o) {if (o.scrollheight <= o.clientheight) {o.scrolltop = 0;
  O.scrollbar.style.display = ' None '; else {o.scrollbar.style.display = ' block ';
  var x=0, y=0;
  var p = o;
    while (p) {x + = P.offsetleft;
    Y + + p.offsettop;
  p = p.offsetparent; var bordertop = parseint (o.style.bordertopwidth| |
  0); var borderbottom = parseint (o.style.borderbottomwidth| |
  0);
  O.scrollbar.style.width = o.scrollbarwidth + ' px ';
  O.scrollbar.style.height = o.clientheight + ' px ';
  O.scrollbar.style.top = y + bordertop + ' px ';
  O.scrollbar.style.left = x + o.offsetwidth-o.scrollbarwidth + ' px ';
  O.scrollbarindex.style.width = o.scrollbarwidth + ' px ';
  var h = o.clientheight-(o.scrollheight-o.clientheight);
  When the scrollbar slider is the smallest 20 pixels if (H <) {h = 20;
  } o.scrollbarheight = h;
  O.scrollbarindex.style.height = h + ' px ';
  O.scrollbarindex.style.left = ' 0px ';
Setscrollposition (o); function Setscrollposition (o) {o.scrollbarindex.style.top = (o.clientheight-o.scrollbarheight) * O.scrollTop/(O.S
crollheight-o.clientheight) + ' px '; } document.documentElement.onmousemove = function (evt) {if!scrollmoveobj) return; EVT = EVT | |
  Event var per = (scrollmoveobj.scrollheight-scrollmoveobj.clientheight)/(Scrollmoveobj.clientheight-
  Scrollmoveobj.scrollbarheight) Scrollmoveobj.scrolltop = scrolly-(scrollpagey-evt.clienty) * per;
Setscrollposition (Scrollmoveobj);
  } document.documentElement.onmouseup = function (evt) {if (!scrollmoveobj) return;
  if (ScrollMoveObj.scrollBar.className = = ") {ScrollMoveObj.scrollBarIndex.style.backgroundColor = ' #aaa ';
  } scrollmoveobj = null;
Document.body.onselectstart = function () {return true};
  //mouse wheel scrolling function scrollmove (evt) {var div = This.scrolldiv | | this;
  if (div.scrollheight <= div.clientheight) return true; EVT = EVT | |
  Event
  var step = 20;
    if (Evt.wheeldelta < 0) {if (Div.scrolltop >= (div.scrollheight-div.clientheight)) return true;
  Div.scrolltop + = step;
    else {if (div.scrolltop = 0) return true;
  Div.scrolltop-= step;
  } setscrollposition (div);
return false;

 }

Full instance code click here to download the site.

More readers interested in JavaScript-related content can view the site topics: "JavaScript switching effects and tips summary", "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and tips summary", " JavaScript error and debugging skills Summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary and JavaScript mathematical calculation usage Summary

I hope this article will help you with JavaScript programming.