jquery implements the simulation scroll bar effect;

Source: Internet
Author: User

scroll bar in web development, very common, the original HTML scroll bar is very difficult to see, so many sites with the help of JS to simulate the implementation of the scroll bar effect;

The implementation principle of the scroll bar is actually relatively simple, take the vertical scroll bar to say:

1), the outermost container needs to set Overflow:hidden, the height of the inner container (scroll box) above the outermost container, will appear on the right side of the absolute positioning of the scroll bar, and also on the outer container to monitor the mouse wheel event, according to the speed of scrolling to set the right scroll bar top value;

2), to the right scroll bar to monitor the mouse drag events, when dragging the scroll bar, the contents of the scroll box will occur corresponding scrolling, here is required to calculate the scrolling distance scroll box;

3), Scrolling distance = slider movement Distance ÷ window height x page length;

Although the principle is simple, but also need to add a little, because the mouse wheel event browser compatibility problems,

The return value of Event.wheeldelta under IE and chrome can be used to know whether the rollers are rolled up or down.

When the return value is positive, the description is rolled up

When the return value is negative, the description is rolled down

But Event.wheeldelta in Firefox does not work, under the Firefox need to Event.detail to know whether the scroll wheel is rolling up or down, Firefox is a little different:

When the return value is positive, the description is rolled down

When the return value is negative, the description is rolled up

So we need to find a way to do a compatibility, here is the use of jquery to achieve the scrollbar effect, so we borrow jquery MouseWheel this plugin to do the compatibility, if the original JS to achieve, you need to do compatible (degree Niang);

Take a direct look at a demo:http://codepen.io/jonechen/pen/lnrozb;

The effect has been basically realized, but not perfect;

The CSS code is as follows:

*{padding:0;margin:0;Font:14px/1.8 "Microsoft Yahei";-moz-user-select:None;/** Disable text selection*/}. Box{width:600px;Height:600px;position:relative;Border:1px solid #d98d9d;margin:0 Auto;Overflow:Hidden;}. Silderbar{width:5px;Height:99%;position:Absolute;Top:0.5%; Right:0.5%;background:#bbb;Border-radius:5px;Overflow:Hidden;}. Silderbar span{Height:20px;width:100%;Top:0; Left:0;position:Absolute;Display:Block;background:#f90}. Content{padding:10px;Word-break:Break-all;}P{Margin-bottom:10px;text-indent:2em;}p+img{Max-width:100%;margin:10px Auto;Display:Block;}

The HTML code is as follows:

<Divclass= "box">    <Divclass= "Content">        <H1style= "font-size:20px;text-align:center;padding:10px 0">Spurs home victory grizzly Bear 2-0 Leonard 13 points Duncan 3 points 9 rebounds</H1>        <P>NetEase Sports April 20 Report:<BR>The San Antonio Spurs are expanding their dominance at home. Mills replaced 16 points, Leonard scored 13 points, they led the team 4 scoring on the double, the Spurs in the game gradually opened the score, they in the Western first series of the Second World War home to 94-68 win the Memphis Grizzlies team.        The Spurs ' gross position score expanded to 2-0, and the third of the parties will move to Memphis. </P>        <imgsrc= "Http://img3.cache.netease.com/photo/0005/2016-04-20/BL3G2K6J4TM10005.jpg"  >        <P>The Spurs mills get 16 points, Leonard gets 13 points, Aldridge gets 10 points, 8 rebounds and 4 caps, Martin gets 10 points, Duncan gets 3 points, 9 rebounds and 4 assists.        Grizzlies Allen gets 12 points and 3 rebounds, Randolph gets 11 points and 12 rebounds, Barnes gets 9 points and 6 rebounds. </P>        <P>The team after the start of the fierce competition, the field on the score alternately increased, Martin two penalty one, the first section still has 2 minutes 55 seconds when the grizzly team to 11-13 backward.        After the game was controlled by the Spurs, Gino won 4 points, in three points, they led the team to play 9-0 small climax, the Spurs to 22-11 lead 11 points to the end of the first quarter. </P>        <P>Alan alone got 4 points, he beat the team in the second quarter hit 8-2 of the counter-attack wave, Grizzly team Chase to 21-27. Mills stood back 5 points, and Leonard, Martin and others took turns scoring, 3 minutes and 40 seconds before halftime, and the Spurs were 41-24 ahead of 17 points.            Barnes jumper hit, Martin three-point hit, Parker jump score, Spurs at the end of the half 49-35 lead 14 points. </P>        <P>the Spurs ' Leonard scored 9 points in the first half, Mills got 8 points, and the Grizzlies Allen got 8 points and Randolph got 7 points and 6 rebounds. </P>        <P>shortly after the start of the third quarter, Aldridge two jump shots, Gino Two penalty one, the Spurs to 63-45 lead 18 points.        Arenlian to take 4 points to help the team to win points, Mills, three points, Duncan two penalty one, the Spurs at the end of the third 70-53 lead. </P>        <P>Anderson scored four goals in the fourth quarter, the Spurs lead 21 points. Grizzlies play very tenacious, Randolph alone 4 points, Farmar jump shot hit, they help the team to narrow the gap. The Spurs ' two veterans then found the crosshair and they set the game for the team. West broke the dunk, Martin cast three points, they have 4 points to play 8-2 of the attack wave, the fourth quarter and 3 minutes 15 seconds when the Spurs 88-63 lead 25 points.        The big gap left the game out of suspense, and both sides were on the bench, with the Spurs winning 94-68. </P>        <P>Grizzlies starting lineup: Farmar, Carter, Barnes, Randolph, Anderson</P>        <P>Spurs starter lineup: Parker, Greene, Leonard, Aldridge, Duncan</P>    </Div>    <Divclass= "Silderbar"><span></span></Div></Div>

The JS code is as follows:

<script src= "Http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js" ></script><script src= "http:/ /cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js "></script><script>$(function() {    varBox_height = $ (". Box"). Outerheight (); varContent_height = $ (". Content"). Outerheight (); varBar_height = $ (". Silderbar"). Outerheight (); varIsmousedown =false; varDistance = 0; //The initial height of the scroll bar;    varn = box_height/content_height *Bar_height $ (". Silderbar span"). CSS ("height"), N) $ (". Silderbar"). MouseDown (down);    $ (window). MouseMove (move);    $ (window). MouseUp (UP); functionDown (event) {Ismousedown=true; }    functionMove (event) {Event.preventdefault (); Distance= Event.pagey-$ (". Silderbar"). Offset (). Top; if(Ismousedown = =true) {Scroll (distance)}}functionUp () {Ismousedown=false; }    //roller events;$ (". Box"). Bind (' MouseWheel ',function(event, Delta) {Event.preventdefault ()vardir = Delta > 0? ' Up ': ' Down ', vel=Delta Distance= $ (". Silderbar span"). Offset (). Top-$ (". Box"). Offset (). Top; Vel> 0? Distance-= 10:distance + = 10scroll (distance);    }); functionScroll (distance) {if(Distance < 0) {Distance= 0        } Else if(Distance > Bar_height-$ (". Silderbar span"). Outerheight ()) {distance= Bar_height-$ (". Silderbar span"). Outerheight (); }        $(". Silderbar span"). CSS ("Top", distance)//Scrolling distance = slider move Distance ÷ window height x page length        //var roat = distance/(Bar_height-$ (". Silderbar span"). Outerheight ())        //var scroll_distance = parseint (Roat * (content_height-box_height))        varScroll_distance = parseint (Distance/box_height *content_height) $ (". Content"). CSS ("Margin-top",-scroll_distance)}})</script>

jquery implements the simulation scroll bar effect;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.