Modifications for the analog scrollbar plug-in (JQuery.slimscroll.js)

In the development process, the programmer will always encounter the various strange needs of the product manager, although some of the needs are very wonderful, but have to say that some must be able to guide our continuous learning and progress, recently encountered in the work of this problem. The requirement is to use a custom scrollbar style on every major browser, and to achieve perfect compatibility, this blog records its own analysis process. The source of this blog can be accessed Slimscroll

To be able to use custom scroll bar styles and be compatible with all major browsers, the first thing to think about is the style of the CSS custom scroll bar. So the search on the internet found that there is really such a CSS style exists:

ul:: -webkit-scrollbar /* the whole part of the scrollbar, where the properties are Width,height,background,border (just like a block-level element). */ Ul:: -webkit-scrollbar-button /* the buttons at both ends of the scroll bar. You can use Display:none to let it not display, you can also add a background image, color change the display effect. */ Ul:: -webkit-scrollbar-track /* outer track. You can use Display:none to let it not display, you can also add a background image, color change the display effect. */ Ul:: -webkit-scrollbar-track-piece /* inner track, scroll bar middle section (drop). */ Ul:: -webkit-scrollbar-thumb /* the part of the scroll bar that can be dragged */ Ul:: -webkit-scrollbar-corner /* corner */ ul:: - Webkit-resizer /* define the lower right corner of the drag block style */  

Here is just a brief introduction, the specific use of this blog to customize the browser scroll bar style, to create your own scroll bar style
This method does customize the scrollbar style, but it is only valid in the WebKit kernel browser and cannot be perfectly compatible. The above blog recommended a jquery plugin to solve this problem, but the introduction is not comprehensive, and not good use. So I searched the internet to find a similar jquery plugin there are many, in order to be closer to the project I chose the jquery.slimscroll.js. However, in the actual use of the process found that the plug-in does not support scrolling page, once the page to append new content, because the content of the height of the change in the presence of scrolling content jumps.

Reproduce the problem

See the actual effect, please bash here demo1
From the plugin's github download the source code, and introduced to the page, in order to see the effect of open the debug panel, I set the content when scrolling output its scrolltop value, according to the output of the results we can obviously see after appending new content, the content will have a jump situation

scrollTop 49scrollTop 51scrollTop 105   //内容向上跳跃了scrollTop 108

Open Source Analysis Reason

The following paragraph in the source code is the function to be triggered when dragging the scrollbar

//Make it draggable and no longer dependent on the jQueryUIif(o.raildraggable){ //Set to True by default  Bar.Bind("MouseDown", function(e){    var$doc= $(document);Isdragg= true;T= parsefloat(Bar.CSS(' Top '));Pagey= e.Pagey;    $doc.Bind("Mousemove.slimscroll", function(e){Currtop=T+ e.Pagey -Pagey;      Bar.CSS(' Top ',Currtop);      scrollcontent(0, Bar.position().Top, false);//scroll content    });    $doc.Bind("Mouseup.slimscroll", function(e){Isdragg= false;Hidebar();      $doc.Unbind('. Slimscroll ');    });    return false;  }).Bind("Selectstart.slimscroll", function(e){    e.stoppropagation();    e.Preventdefault();    return false;  });}

When the page is appended with new content, we need to reinitialize the plug-in, the top value of the scroll bar is recalculated during the initialization process, and when the page is pressed, the T value and the Pagey value record are always pressed at the state moment (no new content time is appended) when the new content is appended. So when the new content is added, and then the MouseMove event is triggered, the currtop is computed to get the value before the page turn (the top value of the scroll bar is also the previous value), and the content height has changed, so the content jumps. (I don't know if I have a clear explanation.)

The solution to the problem

Through the above analysis we know that because the new content after the page is not obtained to the latest scroll bar top value and the latest E.pagey value, for this problem I added the following code in the source:

//scroll content by the given offsetscrollcontent(offset, false, true);//The following is what I added//Append new content to force the mouse event before the unbind, without using the value recorded before page flipping$(document).Unbind(' Mousemove.slimscroll ');//After you unbind the mouse event in order to continue the pull-down scroll bar//Record the top value and mouse position of the latest scroll barvarPagey,T= parsefloat(Bar.CSS(' Top '));$(document).Bind("Mousemove.slimscroll", function(e){    //Here the mouse state is judged to distinguish between scrolling events and drag events    //When the left mouse button is in the pressed state,    if(e.Buttons == 1){Pagey=Pagey|| e.PageyCurrtop=T+ e.Pagey -Pagey;        Bar.CSS(' Top ',Currtop);        scrollcontent(0,Currtop, false); //scroll content    }    return;})

The above code solves the jumping problem of dragging the scroll bar when new content is added to the page.

function_onWheel{    //...     var=||window.event;        // 以下是我添加的内容    //取消拖动    $(document).unbind('mousemove.slimscroll');        //...}

The above code is to solve the problem of the Click event being overwritten after page scrolling.

Why use e.buttons instead of E.button here?
Mouseevent.buttons can indicate the mouse button in any mouse event
Mouseevent.button can only indicate which button is pressed when the event is pressed or released by a button, or when multiple keys are pressed simultaneously. Therefore, it is not reliable to judge MouseEnter, MouseLeave, mouseover, mouseout or MouseMove these events.

after modifying the source of the effect, please click here demo2

The code changed here is only for me to see, if you have a better way, welcome to the comments in the proposed

Reference documents:

Mouseevent.button
Mouseevent.buttons

Modifications for the analog scrollbar plug-in (JQuery.slimscroll.js)