article:
Website: Product Landing Page PSD/HTML/CSS Template
article:
Website: Halftone

JS Plugin: nanoScroller.js

Advertisement

nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website. It uses minimal HTML markup being .nano > .content. The other scrollbar div elements .pane > .slider are added during run time to prevent clutter in templating. The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets.


Implement

markup container

<div id="about" class="nano">
 <div class="content"> ... content here ...  </div> 
</div>

css
<link rel="stylesheet" href="nanoscroller.css">

Plugin: nanoScroller.js


jquery
<script type="text/javascript" src="javascripts/overthrow.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.nanoscroller.js"></script>


javascript
$(function(){
    $('.nano').nanoScroller({
        preventPageScrolling: true
    });
});



demo
github
download

Advertisement
Tags: plugin, jquery, scroller, scroll, page, web, container, overflow, ipad, iphone, tablet, android, apple, mobile, desktop, html, css, scrollbars

Leave a Comment

No Comment

© Creative3x Ltd.