Code Monkey home page Code Monkey logo

jsfancyscroll's Introduction

This project is no longer maintained. Feel free to get some inspiration from the implementation.

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. :)

jsfancyscroll's People

Contributors

leoselig avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.