Small Example of js self-made scroll bar

I wrote a js self-made scroll bar. First, let's take a look at the demo (Click here) first.

There are two demos. The black one on the right is a superficial code I wrote at the beginning:

Copy codeThe Code is as follows: var scrollself = (function (){

Var scrollblock, // scroll Block
Scrollcontent, // The scrolling content
Scrollbar, // scroll bar
Scrollpanel, // scroll area of the scrolling content
Cdistance, // The distance from which the scrolling content is to be rolled
Bdistance, // The scroll distance of the Rolling Block
MinuTop, // blank at the beginning and end of the scroll bar
CTop, // top of the scrolling content
StartY = 0, // The cursor position at the beginning of the scroll action
BTop = 0, // The top of the First Rolling Block starting from the rolling action
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 for this is that it is superficial. You can see the rolling effect of the two demos. When you pull the Rolling block on the right side, the experience is poor and the experience is very slow, and the left side is much smoother.

Because it was very difficult, I went online again and looked at other people's code. Then I changed the code according to other people's ideas. Then I had the green demo on the left. Obviously, the effect is much better. Code:

Copy codeThe Code is as follows: var scroll = (function (){

Var scrollblock, // scroll Block
Scrollcontent, // The scrolling content
Scrollbar, // scroll bar
Scrollpanel, // scroll area of the scrolling content
Cdistance, // The distance from which the scrolling content is to be rolled
Bdistance, // The scroll distance of the Rolling Block
MinuTop, // blank at the beginning and end of the scroll bar
CTop, // top of the scrolling content
StartY = 0, // The cursor position at the beginning of the scroll action
BTop = 0; // The top of the First Rolling Block starting from the scroll 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 ');

After comparing the two codes, there are not many modifications, but there is a big difference. The smooth one (the green one on the left) has this thing-setCapture and releaseCapture.

For more information, see.