Modern scrolling for jQuery.
Primarly designed to work on touch devices, the plugin works as well on desktop browsers. At the moment only vertical scroll is supported.
Note that the plugin does not use the widget factory model, as it can be used with plain jQuery (without jQuery UI or jQuery Mobile).
Download the production version or the development version and the CSS.
In your web page:
<link rel="stylesheet" href="https://github.com/zippy1978/jquery.scrollz/blob/master/jquery.scrollz.css">
<script src="https://github.com/zippy1978/jquery.scrollz/raw/master/jquery.js"></script>
<script src="https://github.com/zippy1978/jquery.scrollz/raw/master/jquery.scrollz.min.js"></script>
<script>
jQuery(function($) {
// #content must have a height set before calling scrollz
$('#content').scrollz();
});
</script>Or auto-enhancement with jQuery Mobile:
<html>
<head>
<link rel="stylesheet" href="https://github.com/zippy1978/jquery.scrollz/blob/master/jquery.mobile.css">
<link rel="stylesheet" href="https://github.com/zippy1978/jquery.scrollz/blob/master/jquery.scrollz.css">
<script src="https://github.com/zippy1978/jquery.scrollz/raw/master/jquery.js"></script>
<script src="https://github.com/zippy1978/jquery.scrollz/raw/master/jquery.mobile.js"></script>
<script src="https://github.com/zippy1978/jquery.scrollz/raw/master/jquery.scrollz.min.js"></script>
</head>
<body>
<div id="index" data-role="page" data-theme="a">
<!-- Header -->
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<!-- Header content here. -->
</div>
<!-- Content : data-scrollz supports 'simple' or 'pull'. Content is automatically resized to the window height between header and footer. -->
<div id="content" data-role="content" data-scrollz="pull">
<!-- Scrollable content here. -->
</div>
<!-- Footer -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<!-- Footer content here. -->
</div>
</div>
</body>
</html>Options can be set when calling .scrollz():
<script>
jQuery(function($) {
$('#content').scrollz({
styleClass: 'myClass',
pull: true
});
});
</script>Available options are:
The plugin can trigger the following events:
The bottomreached event is usefull to implement 'infinte scroll' feature.
When pull option is enabled, it is necessary to bind the pulled event in order to hide the pull header one the action triggered on pull is finished:
<script>
jQuery(function($) {
// Enable scrollz
$('#content').scrollz({
pull: true
});
// Bind pulled event
$('#content').bind('pulled', function() {
// Process pull action here
// Hide pull header when done
$('#scrollz2').scrollz('hidePullHeader');
});
});
</script>Scrollz provides the following methods:
<script>
jQuery(function($) {
// Enable scrollz
$('#content').scrollz();
// Hide pull header
$('#content').scrollz('hidePullHeader');
// Change height
$('#content').scrollz('height', 600);
});
</script>The plugin is provided with a default CSS. This CSS includes pull header and scroll thumb styling.
The plugin supports jQuery Mobile auto-enhancement feature with attribute 'data-scrollz' for easier / faster integration. This attribute supports the follwoing values :
When the feature is used, the scrolling area height is set to fit the window size (without eventual header or footer). This height is updated every time the widow is resized. So the attribute cannot be used on 2 elements stacked vertically. However the attribute can be used on elements stacked horizontally as the width is never resized.
Copyright (c) 2012 Gilles Grousset
Licensed under the MIT, GPL licenses.
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.
Please don't edit files in the dist subdirectory as they are generated via grunt. You'll find source code in the src subdirectory!
While grunt can run the included unit tests via PhantomJS, this shouldn't be considered a substitute for the real thing. Please be sure to test the test/*.html unit test file(s) in actual browsers.
This assumes you have node.js and npm installed already.
grunt --version at the command-line.npm install -g grunt to install the latest version. You may need to run sudo npm install -g grunt.npm install to install the project's dependencies.In order for the qunit task to work properly, PhantomJS must be installed and in the system PATH (if you can run "phantomjs" at the command line, this task should work).
Unfortunately, PhantomJS cannot be installed automatically via npm or grunt, so you need to install it yourself. There are a number of ways to install PhantomJS.
Note that the phantomjs executable needs to be in the system PATH for grunt to see it.