Skip to content

Ridiculously fast custom scrollbar plugin for jQuery using the same smart technique as Facebook.

Notifications You must be signed in to change notification settings

Abdelhady/jsFancyScroll

This branch is 1 commit ahead of, 1 commit behind leoselig/jsFancyScroll:master.

Folders and files

NameName
Last commit message
Last commit date
Jun 1, 2017
Nov 5, 2013
Nov 5, 2013
Oct 30, 2013
Oct 30, 2013
Oct 30, 2013
Oct 30, 2013
Oct 30, 2013

Repository files navigation

jsFancyScroll

##Installtion

Include the plugin.js and the style.css (located in the build/ directory) in your web page.

Apart from that, you can also clone the repository and build the plugin by yourself. For that, having Node.JS and the grunt plugin installed simply run once:

npm install

And then:

grunt

##Benefits In opposite to other scrollbar plugins such as the TinyScrollbar, this plugin uses a technique also applied by Facbook. The scrolled content is actually scrolled natively by the browser scrolling mechanisms and the FancyScrollbar is kept in sync by bi-directional event listening. This enables:

  • blazingly high performance
  • scrolling on page search
  • complete touch support

##Usage To create a vertically scrollable area you just need the following markup.

<ul class="scrollY">
    <div class="scrollbarY">
		<div class="thumb"></div>
	</div>
	<div class="viewport">
		<div class="content">
            <!-- Your conent -->
        </div>
	</div>
</ul>

That's it - no initialization required! ;)

You might as well use horizontal scrolling:

<ul class="scrollX">
    <div class="scrollbarX">
    	<div class="thumb"></div>
	</div>
	<div class="viewport">
		<div class="content">
            <!-- Your conent -->
        </div>
	</div>
</ul>

And of course, you can combine these two:

<ul class="scrollX scrollY">
    <div class="scrollbarX">
        <div class="thumb"></div>
    </div>
    <div class="scrollbarY">
        <div class="thumb"></div>
    </div>
	<div class="viewport">
		<div class="content">
            <!-- Your conent -->
        </div>
	</div>
</ul>

##Contribution Feel free to file issues, fork and create pull requests. :)

About

Ridiculously fast custom scrollbar plugin for jQuery using the same smart technique as Facebook.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 73.0%
  • CSS 26.9%
  • Batchfile 0.1%