Actual combat-jquery Implement custom ScrollBar plug-ins

：

This article mainly explains the JS interaction, does not have the space to tell everybody how to write the HTML CSS, lets the article concise.

General idea:

How to implement the scroll slider, let the slider with the content linkage? Please see:

The first thing to see

is the distance between the empty mouse position and the solid mouse position equal to the distance that the slider moves X0 ?

Answer: Equals

What is the maximum distance that the slider moves X0 ?

Answer: Height of scrollbar x-height of slider

What is the maximum height Y0 content can scroll ?

A. Total content height Y-the height of the content visibility area

By comparison: You can draw a scrolling ratio :

So what should the code say?

First step: Get the mouse move distance = slider move distance

Step two: Get the distance that the slider can move

Step three: Content scrollable height

Fourth Step: Content scrolling height can be obtained by scrolling proportional relationship above

Five steps: Set the position of the slider

Plug-in package large box:

• First create a constructor Cusscrollbar
• The constructor is then instantiated with the new operator, and the initialization function _init,_init is the entry that initializes the instance.

Add:(self- 　　 invoking anonymous function: Create a special function scope by creating a self-invoking anonymous function that does not conflict with existing functions, methods and variables, and third-party libraries that have the same name.) )

• win,doc,$: Corresponds to the external passed Window object, the Document object, and the jquery object.
• Cusscrollbar: Create a constructor and call the initialization function _init ().
• [Options]: Instantiation parameters are passed into the _init function
• This: Represents an instance

To add a method to the prototype:

Scenario 1:

function () {    console.log ("test");}

Scenario 2: (Extend method based on jquery)

$.extend (Cusscrollbar.prototype, {
functionfunction  () {}})

　　　　　　Supplement:$.extend Method:

　　　　　　

Exposes the constructor so that it can be called externally:

Win. Cusscrollbar = Cusscrollbar;

The big box above is done, and the following is the beginning of the method defined on the prototype:

　_init () function:

1_init:function(options) {2   //Save the external this here = "Cusscrollbar3   varSelf = This;4   //Configuring default Parameters5Self.options = {6Scrolldir: ' Y ',//Direction of scrolling7Contselector: ",//scrolling content Area Selector8Barselector: ",//scroll bar Selector9Sliderselector: ",//Scroll Slider selectorTenCorrectselector: '. Correct-bot ',//Corrective Elements One   }; A   //Merge external parameters with default parameters with deep copy -$.extend (true, Self.options, Options | | {}); -   //calling the _initdomevent method the self._initdomevent (); -   //return to self for chained calls -   returnSelf ; -},

_initdomevent () function:

1_initdomevent:function () {2   varopts = This. Options;3   //scrolling Content Area object, must be filled4    This. $cont =$ (opts.contselector);5   //scroll bar Slider object, must be filled6    This. $slider =$ (opts.sliderselector);7   //scroll Bar Object8    This. $bar = Opts.barselector?9 $ (opts.barselector):Ten Self . $slider. Parent (); One   //Get Document Object A    This. $doc =$ (doc); -   //Corrective Element Object -    This. $correct =$ (opts.correctselector); the    This. _initsliderdragevent () - . _bindcontscroll (); -},

_initsliderdragevent () function

1_initsliderdragevent:function () {2   varslider = This. $slider,3Sliderel = slider[0],4Self = This;5   if(Sliderel) {6     varDoc = This. $doc,7       //Drag start position8 Dragstartpageposition,9       // Ten Dragstartscrollposition, One       //Drag Scale A dragcontbarrate; -  -     functionMousemovehandler (e) { the E.preventdefault (); -Console.log (' MouseMove '); -       if(Dragstartpageposition = =NULL)return; - Self.scrollto ( +Dragstartscrollposition + -(e.pagey-dragstartpageposition) *dragcontbarrate +       ); A     } at  -     //Binding Events -Slider.on (' MouseDown ',function(e) { -       //Block Browser default behavior - E.preventdefault (); -Console.log (' MouseDown '); inDragstartpageposition =E.pagey; -Dragstartscrollposition = self. $cont [0].scrolltop; toDragcontbarrate = +Self.getmaxscrollposition ()/self.getmaxsliderposition (); -  the       //the MouseMove event is bound to the document in order to improve the user experience by triggering the MouseMove event when the mouse is not released, but when the mouse moves out of the scroll wheel.  * Doc $. On (' Mousemove.scroll ', Mousemovehandler)Panax Notoginseng. On (' Mouseup.scroll ',function(e) { -Console.log (' MouseUp '); theDoc.off ('. Scroll ')); +         }); A     }); the   } +   returnSelf ; -},

Getmaxsliderposition ()

1 // Slide the movable distance 2 function () {3   var  This ; 4   return Self, $bar. Height ()-Self . $slider. Height (); 5 },

Mousemovehandler ()

 1  function   Mousemovehandler (e) { 2   E.preventdefault ();  3  console.log (' MouseMove '  4  if  (dragstartpageposition = = null ) return  ;  5   Self.scrollto ( 6  dragstartscrollposition +7  (e.pagey-dr agstartpageposition) * dragcontbarrate  8  Span style= "color: #000000");  9 } 

ScrollTo ()

1 // move to a specific location 2 function (positionval) {3   var  This ; 4 Self   . $cont. scrolltop (positionval); 5 },

_bindcontscroll ()

1 //Monitor the scrolling of content, the position of the Sync slider2_bindcontscroll:function () {3   varSelf = This;4Self-$cont. On (' scroll ',function () {5     varSliderel = self. $slider && self. $slider [0];6     if(Sliderel) {7SliderEl.style.top = self.getsliderposition () + ' px ';8     }9   });Ten   returnSelf ; One},

Getsliderposition ()

// calculate the current position of the slider function () {  varThis,    = self.getmaxsliderposition ();   return math.min (    maxsliderposition,    * self    . $cont [0].scrolltop/     Self.getmaxscrollposition ()  );},

Attach Source Address: Https://github.com/liuzhaoxu1996/slider-plugin Welcome, fork Me Thank you ~ ~ ~

Actual combat-jquery Implement custom ScrollBar plug-ins