A small example of JS homemade scroll bar _javascript tips

Write a JS homemade scroll bar, first of all, take a look at the demo (click here) First

There are two demo, the black one on the right, is the more superficial code I started writing:

Copy Code code as follows:

var scrollself= (function () {

var scrollblock,//scroll block
Scrollcontent,//content scrolled
ScrollBar,//scroll bar
Scrolling area for Scrollpanel,//scrolling content
Cdistance,//scrolling distance of content to scroll
Bdistance,//The distance the scroll block is to scroll
Minutop,//scroll bar/tail left blank
Ctop,//scrolling top of content
Starty=0,///scrolling start position of mouse
Btop=0,///Roll action start initial scroll block top
Isdrag=false; Whether to pull the scroll block

function Prevent (e) {

if (E.preventdefault) {
E.preventdefault ();
}
if (e.stoppropagation) {
E.stoppropagation ();
}
E.cancelbubble=true;
E.returnvalue=false;
}

function MouseDown (event) {
Isdrag=true;
event=event| | window.event;
Starty=event.clienty;
Btop=scrollblock.offsettop;
Ctop=scrollcontent.offsettop;

Prevent (event);

}

function MouseMove (event) {
if (Isdrag) {

event=event| | window.event;

var newbtop=event.clienty-starty+btop,
newctop=ctop-(Event.clienty-starty)/bdistance*cdistance;

            if (newbtop<minutop) {
                 Newbtop=minutop;
                newctop=0;
           }else{
                 if (newbtop>bdistance+minutop) {
                     newctop= -cdistance;
                     Newbtop=bdistance+minutop;
               }
           }

scrollblock.style.top=newbtop+ ' px ';
scrollcontent.style.top=newctop+ ' px ';
}else{
Isdrag=false;
}

Prevent (event);
}

function MouseUp (event) {

Isdrag=false;

Prevent (event);
}

function AddHandler () {
Scrollblock.onmousedown=mousedown;
Scrollblock.onmousemove=mousemove;
Scrollblock.onmouseup=mouseup;
Document.onmouseup=mouseup;
}

return{
Init:function (scrollpanel_id,scrollcontent_id,scrollbar_id,scrollblock_id) {
Scrollblock=document.getelementbyid (scrollblock_id);
Scrollcontent=document.getelementbyid (scrollcontent_id);
Scrollbar=document.getelementbyid (scrollbar_id);
Scrollpanel=document.getelementbyid (scrollpanel_id);
Minutop=scrollblock.offsettop;
Cdistance=scrollcontent.offsetheight-scrollpanel.offsetheight;
Bdistance=scrollbar.offsetheight-minutop*2-scrollblock.offsetheight;

Enclose (scrollpanel,scrollcontent,scrollbar,scrollblock,bdistance,cdistance,minutop);
AddHandler ();
}
}

}());

Scrollself.init (' Scrollpanel2 ', ' scrollcontent2 ', ' scrollbar2 ', ' Scrollblock2 ');

The reason that it is superficial, compare the rolling effect of the two demo to know, the right pull the rolling block time, the experience is good, very card, and the left is much smoother.

Because it is very card, I went on the internet to look at someone else's code, and then according to other people's ideas to change the code, there is the green on the left of the demo, it is obvious that the effect is much better, code:

Copy Code code as follows:

var scroll= (function () {

var scrollblock,//scroll block
Scrollcontent,//content scrolled
ScrollBar,//scroll bar
Scrolling area for Scrollpanel,//scrolling content
Cdistance,//scrolling distance of content to scroll
Bdistance,//The distance the scroll block is to scroll
Minutop,//scroll bar/tail left blank
Ctop,//scrolling top of content
Starty=0,///scrolling start position of mouse
Btop=0; The top of the scrolling block at the beginning of the scrolling action

function MouseDown (event) {
event=event| | window.event;
Starty=event.clienty;
Btop=scrollblock.offsettop;
Ctop=scrollcontent.offsettop;
if (scrollblock.setcapture) {

Scrollblock.onmousemove=dodrag;
Scrollblock.onmouseup=stopdrag;
Scrollblock.setcapture ();
}else{
Document.addeventlistener ("MouseMove", dodrag,true);
Document.addeventlistener ("MouseUp", stopdrag,true);
}

}

function Dodrag (event) {
event=event| | window.event;

var newbtop=event.clienty-starty+btop,
newctop=ctop-(Event.clienty-starty)/bdistance*cdistance;

if (newbtop<minutop) {
Newbtop=minutop;
Newctop=0;
}else if (newbtop>bdistance+minutop) {
Newctop=-cdistance;
Newbtop=bdistance+minutop;
}
scrollblock.style.top=newbtop+ ' px ';
scrollcontent.style.top=newctop+ ' px ';

}

function Stopdrag (event) {
if (scrollblock.releasecapture) {

Scrollblock.onmousemove=dodrag;
Scrollblock.onmouseup=stopdrag;
Scrollblock.releasecapture ();
}else{
Document.removeeventlistener ("MouseMove", dodrag,true);
Document.removeeventlistener ("MouseUp", stopdrag,true);
}
Scrollblock.onmousemove=null;
Scrollblock.onmouseup=null;
}
return{
Init:function (scrollpanel_id,scrollcontent_id,scrollbar_id,scrollblock_id) {
Scrollblock=document.getelementbyid (scrollblock_id);
Scrollcontent=document.getelementbyid (scrollcontent_id);
Scrollbar=document.getelementbyid (scrollbar_id);
Scrollpanel=document.getelementbyid (scrollpanel_id);
Minutop=scrollblock.offsettop;
Cdistance=scrollcontent.offsetheight-scrollpanel.offsetheight;
Bdistance=scrollbar.offsetheight-minutop*2-scrollblock.offsetheight;
Scrollblock.onmousedown=mousedown;
Enclose (scrollpanel,scrollcontent,scrollbar,scrollblock,bdistance,cdistance,minutop);
}
}

}());

Scroll.init (' Scrollpanel ', ' scrollcontent ', ' scrollbar ', ' scrollblock ');

Compared to the two code, in fact, not much modification, there is a very big difference, fluent that one (the left side of the green one) more of this thing--setcapture, ReleaseCapture.

What is the specific, and then study the first.