JavaScript custom scroll bar implements code _javascript tips

It is often encountered in the work of the content will go beyond a fixed range, the content will generally use the scroll bar to scroll to display.

But with the browser default scroll bar is often the product manager despise, but with CSS can not change the style of the scroll bar, fortunately, there is a universal JS ^_^ ~ ~

There are a variety of plug-ins on the Internet, but the most convenient or write their own, but also to the side while learning, DIY (*^__^*)

These three questions deeply haunt me:

• 1, scroll bar height
• 2, each Click Up, down button when the scroll bar should move how much distance
• 3, each drag 1px scroll bar, the page needs to move how much?

The whole frame is probably long like this:

Let's take a look at the first question first.

Because the height of the content area and the visual height of the content and the height of the scroll bar's scrollable area are now known, the first problem is well resolved because the content area is proportional to the distance that the scroll bar moves each time:

　　scroll bar removable range/scroll bar height = content Height/content visual height

How much distance should the scroll bar move each time the button is clicked?

Here I set a value for the parameter distance to determine how much distance the content area should scroll when the button is clicked each time. Changing this value can change the speed of the content area scrolling, if there are better ways and suggestions remember to tell me OH

At the moment, the distance between the content area scrolling is known, and the rest is the calculation of how much distance the scroll bar should be moved relative to how far?

　　scroll bar removable range/scroll bar per move distance = content Area Height/content area How many distances per move

The effect is as follows:

There is also the question of whether to distinguish between a single click or a long press.

So you have to judge from the press button to release the time of the length, currently set to <100MS for a single click, otherwise for long press:

When you drag the scroll bar, how much does the content area need to move each 1px scroll bar?

Know that each 1PX distance of the scroll bar can move a few percent of the range, and then use the content area height divided by this percentage, the scroll bar for each move 1px content area relative scrolling distance.

Content area Scrolling distance = content Area Height/(scroll bar scrolling area/1)

Demo complete code is as follows:

Note: Because of the use of Seajs written, so a little attention to the loading of the file

Css:

. Wapper{scrollbar-3dlight-color: #000; position:relative; height:302px;width:300px;overflow:hidden;margin:0 auto; Line-height:40px;text-align:center}
 . Area{background-color: #E2E2EF; width:100%; position:absolute;top:0px;left:0px;
 bar{position:absolute;top:0px;right:0px height:100%;width:1rem;background-color: #ccc;}
 . scroll,.middle,.forward,.backward{display:block;cursor:pointer;position:absolute;right:0px;width:100%}
 . Forward,.backward{height:16px;background-color: #6868B1;
 Middle{background-color:rgba (255, 255, 255, 0.22); Top:16px;cursor:auto;
 Scroll{position:absolute;top:0px;background-color: #C2C2E9;
 forward{top:0px}
 . backward{bottom:0px;}

Html:

<div class= "Wapper" > <div class= "Area" > <p>1, this is content</p> <p>2, this is content& Lt;/p> <p>3, this is content</p> <p>4, this is content</p> <p>5, this is content</p
  > <p>6, this is content</p> <p>7, this is content</p> <p>8, this is content</p> <p>9, this is content</p> <p>10, this is content</p> <p>11, this is content</p> &L t;/div> <div class= "Bar" > <span class= "Forward" ></span> <span class= "Middle" ><em class= "Scroll" ></em></span> <span class= "Backward" ></span> </div> </div> < Script type= "Text/javascript" src= ". /.. /lib/seajs/sea.js "></script> <script type=" Text/javascript "src=". /.. /lib/base/1.0.x/base.js "></script> <script type=" Text/javascript "> Seajs.use ([' lib/jquery/1.11.x/ Index.js ', ' _example/simulationscroll/simuLationscroll.js '], function ($, scroll) {scroll.init ({wapper: $ ('. Wapper '), Distance:10,});

 

JS:

Define (function (Require, exports, module) {' Use strict ';

 var $ = require (' lib/jquery/1.11.x/index.js ');

 var parameter = null;
 Detection device type var startwhen, Endwhen, Movewhen; 

 var u = navigator.useragent; if (U.match/\b (windows\snt|
  Macintosh)) (\b/)) {//mouse Startwhen = ' MouseDown ';
  Endwhen = ' MouseUp ';
 Movewhen = ' MouseMove ';
  else {//touch screen startwhen = ' Touchstart ';
  Endwhen = ' touchend ';
 Movewhen = ' Touchmove ';

  var simulation = {_mousedowntimer:0, _setintervalid:0, _longclick:false,//Whether long click _turnof:null,//scrolling direction

   Init:function (options) {var t = this; T._scroll = $ ('. scroll '); scroll bar T._wapper = Options.wapper.find ('. area '); Content area t._distance = options.distance;

   Click the Up and Down button page for each scrolling distance var forward = $ ('. Forward '), middle = $ ('. Middle '), backward = $ ('. Backward '); Parameter = {view:t._wapper.parent (). Innerheight (),//view height page:t._wapper.height (),//content height bararea:0,//scrolling Removable range scrollheight:0,//RollThe height of the moving bar scrolldistance:0//scroll bar each time the distance};  Initialize scroll bar if (Parameter.page > Parameter.view) {//scroll bar removable range middle.height (parameter.view-forward.height)

    * 2);

    Parameter.bararea = Middle.height (); scroll bar height = Percentage of scroll bar scrollable range/(page height/visual height) Parameter.scrollheight = parameter.bararea/(Parameter.page/parameter.view)
    ;

    T._scroll.height (Parameter.scrollheight);

    scroll bar each scrolling distance = scroll bar Removable range * The percentage of each page scrolling parameter.scrolldistance = Parameter.bararea/(parameter.page/t._distance);

    Drag the scroll bar t.liveevent ();

     Click the Forward button, if you press the mouse to release the mouse when the long <100ms, then a single click Forward.bind (Startwhen, function (e) {t._turnof = ' forward ';

    T.longpress (E, t.direction);

     ). Bind (Endwhen, function (e) {T.mouseupfun (E, t.direction);

    T._turnof = null;

    });

    Click the Back button backward.bind (Startwhen, function (e) {t.longpress (E, t.direction);

    ). Bind (Endwhen, function (e) {T.mouseupfun (E, t.direction);

    }); Registering Mouse scrolling events
    FF if (document.addeventlistener) {document.addeventlistener (' dommousescroll ', t.mouseruning,false);
   }//Other browser document.onmousewheel = t.mouseruning;

   },//mouse scrolling mouseruning:function (e) {var t = simulation; E = e | |

   window.event;

     ie, FF if (e.detail) {if (E.detail < 0) {t._turnof = ' forward ';

    T.direction ();
     } else{t._turnof = null;
    T.direction ();

     ///Chrome} else if (E.wheeldelta) {if (E.wheeldelta > 0) {t._turnof = ' forward ';

    T.direction ();
     } else{t._turnof = null;

    T.direction ();

   }},//Judge whether the long click Longpress:function (E, movefun) {var t = this; if (U.match/\b (windows\snt|

    Macintosh)) (\b/)) {e = e | | window.event;
    Limited to click on the left mouse button to trigger if (/^mouse/.test (e.type) && E.which!== 1) {return;

    } t._setintervalid = SetInterval (function () {T._mousedowntimer = 10; if (T._mousedownTimer >=) {movefun ();
  }},20);

   }, Mouseupfun:function (E, movefun) {var t = this; if (U.match/\b (windows\snt|

    Macintosh)) (\b/)) {e = e | | window.event;
    Limited to click on the left mouse button to trigger if (/^mouse/.test (e.type) && E.which!== 1) {return;

   } cleartimeout (T._setintervalid);
   if (T._mousedowntimer < MB) {movefun ();
  } t._mousedowntimer = 0; }, Direction:function () {var t = simulation, bartop = T._scroll.position (). Top, PageTop = T._wapper.positio

    N (). Top, movedistance = {};
     if (t._turnof = = ' forward ') {//page to the top, do not perform any action if (bartop = 0) {return; } movedistance = {page:pagetop + t._distance, bar:bartop-parameter.scrolldistance}//If The scroll bar is less distance from the top < the distance per scroll, or has been scrolled to the top, no longer scrolls if (Bartop < parameter.scrolldistance | | | bartop <= 0) {Movedista nce = {page:0, bar:0}}} else {//pageIn the end, do not perform any action if (bartop = = parameter.bararea-parameter.scrollheight) {return;

     } movedistance = {page:pagetop-t._distance, bar:bartop + parameter.scrolldistance}; If the scroll bar is a distance from the bottom < the distance of each scroll or has already been to the bottom, roll to the End if (Movedistance.bar + parameter.scrollheight >= parameter.bararea) {movedistance = {page:parameter.view-parameter.page, bar:parameter.bararea-parameter.scrollhe

     Ight};
    } t._scroll.css ({top:moveDistance.bar}); 
  T._wapper.css ({top:moveDistance.page});  },///Drag scroll bar liveevent:function () {var = this, draging = false, CurrentY = 0, lasty = 0, Pagey = 

   0;

    Detection device type var _ua = function (e) {var Pos = null; if (U.match/\b (windows\snt|

     Macintosh)) (\b/)) {e = e | | window.event;
     Limited to click on the left mouse button to trigger if (/^mouse/.test (e.type) && E.which!== 1) {return; Pos = {Left:e.pagex, TOP:E.PAGey}} else {Pos = {Left:e.originalevent.targettouches[0].pagex, top:e.originalevent.targ
   Ettouches[0].pagey} return Pos;

   };

    var _start = function (e) {//Monitor mouse e.preventdefault ();
    if (t._scroll.get (0). setcapture) {t._scroll.get (0). SetCapture ();

    } draging = true; 

    Records the coordinates of the current scroll bar lasty = T._scroll.position (). Top;
   Record press the mouse's coordinates pagey = _ua (e). Top;

   };
     var _drag = function (e) {if (draging) {var pagetop = T._wapper.position (). Top;

     var bartop = T._scroll.position (). Top;

     Scroll bar per move 1px, page relative scrolling npx and * Current scroll bar to the top of the distance var pagemovedistance =-(Parameter.page/(PARAMETER.BARAREA/1)) * BARTOP;
      if (Lasty + (_ua (e). Top-pagey) < 0) {currenty = 0;

     pagemovedistance = 0; else if (Lasty + (_ua (e). Top-pagey) + parameter.scrollheight >= parameter.bararea) {currenty = parameter.ba
      Rarea-parameter.scrollheight; Pagemovedistance= Parameter.view-parameter.page;
     else {currenty = Lasty + (_ua (e). Top-pagey);
     } t._scroll.css ({top:currenty}); 
    T._wapper.css ({top:pagemovedistance});

   }
   };

     var _end = function (e) {if (draging) {draging = false;
     Release the control of the mouse on IE (t._scroll.get (0). setcapture) {t._scroll.get (0). ReleaseCapture ();
     } document.onmousemove = null;
    Document.onmouseup = null;

   }
   };

   T._scroll.bind (Startwhen, _start);

   T._wapper.bind (Startwhen, _start);
   
   $ (document). Bind (Movewhen, _drag);

   $ (document). Bind (Endwhen, _end);
  $ (document). Bind (' blur ', _end);
} return simulation;
 });

This is the JavaScript simulation scroll bar implementation code, I hope to help you learn.