372 lines
21 KiB
HTML
372 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>jQuery Scrollbar</title>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<link rel="stylesheet" href="includes/style.css">
|
||
<link rel="stylesheet" href="includes/prettify/prettify.css">
|
||
<link rel="stylesheet" href="jquery.scrollbar.css">
|
||
|
||
<script type="text/javascript" src="includes/prettify/prettify.js"></script>
|
||
<script type="text/javascript" src="includes/jquery.js"></script>
|
||
<script type="text/javascript" src="jquery.scrollbar.js"></script>
|
||
<script type="text/javascript">
|
||
jQuery(document).ready(function($){
|
||
window.prettyPrint && prettyPrint();
|
||
$('.wrapper').scrollbar();
|
||
});
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
if(window.location.href.match(/gromo.github.io/i)){
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
|
||
ga('create', 'UA-52878040-1', 'auto');
|
||
ga('send', 'pageview');
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="wrapper scrollbar-dynamic">
|
||
<div class="page-content">
|
||
|
||
<h1>jQuery Scrollbar</h1>
|
||
|
||
Cross-browser CSS customizable scrollbar with advanced features:
|
||
<ul>
|
||
<li>Easy to implement</li>
|
||
<li>No fixed height or width needed</li>
|
||
<li>Supports responsive design</li>
|
||
<li>Customizable CSS</li>
|
||
<li>Standard browser scroll behaviour</li>
|
||
<li>Supports vertical and horizontal scrollbars or both</li>
|
||
<li>Automatically re-initializes scrollbars</li>
|
||
<li>Supports external scrollbars</li>
|
||
<li>Provides a AngularJS directive</li>
|
||
<li>Supports the use as textarea scrollbar</li>
|
||
<li>Browser support: IE7+, Edge, Firefox, Opera, Chrome, Safari</li>
|
||
</ul>
|
||
|
||
<h4><a href="demo/basic.html">Basic Scrollbars Demo</a></h4>
|
||
<h4><a href="demo/advanced.html">Advanced Scrollbars Demo</a></h4>
|
||
<h4><a href="demo/angular.html">jQuery Scrollbars as AngularJS directive</a></h4>
|
||
<h4><a href="https://github.com/gromo/jquery.scrollbar/archive/gh-pages.zip">Download example</a></h4>
|
||
|
||
<h3>Easy to implement</h3>
|
||
<p>
|
||
Go to the demo pages, find a scrollbar that fits your needs, copy the HTML/CSS/JavaScript and paste it to your page.
|
||
Modify CSS styles to change scrollbar colors/sizes. If you can't find a scrollbar that fits your needs, contact the
|
||
author and your scrollbar will be added to the demo page.
|
||
</p>
|
||
|
||
<h3>No fixed height or width needed</h3>
|
||
<p>
|
||
Most of the scrollbar plugins require container height or width to be set in order to calculate scrollbar sizes.
|
||
jQuery Scrollbar does not require height, nor width. You can use max-height/max-width to restrict
|
||
container sizes, or use standard height/width in pixels/percents in the parent container.
|
||
</p>
|
||
|
||
<h3>Supports responsive design</h3>
|
||
<p>
|
||
jQuery Scrollbar can be used in responsive designs as there is no need to set fixed height/width to the container.
|
||
Scrollbars will be automatically updated/hidden/displayed when content or container size changes.
|
||
</p>
|
||
|
||
<h3>Customizable CSS</h3>
|
||
<p>
|
||
Use CSS to customize scrollbar colors, sizes or positions. Use simple or advanced HTML structure to
|
||
customize how scrollbars should look. If simple or advanced HTML structure is not what you are looking for,
|
||
you can use your own HTML structure with custom elements.
|
||
</p>
|
||
|
||
<h3>Standard browser scroll behaviour</h3>
|
||
<p>
|
||
If your browser can scroll content, jQuery Scrollbar will scroll it too! Why? Because it does not emulate
|
||
browser scroll behaviour as many plugins do, instead hides standard scrollbars and displays custom ones. You want
|
||
to scroll with mouse middle button? – Just use it! You want to scroll with touch? – Do it! Your browser
|
||
supports custom scroll behavior? – Use it too! Use the standard or jQuery scrollTop/scrollLeft functions to get
|
||
current scroll offset or scroll to any position. Use the standard "scroll" event to handle content scrolling.
|
||
You don't need to know custom functions/events – everything is done based on standard scroll behaviour.
|
||
</p>
|
||
|
||
<h3>Supports vertical and horizontal scrollbars or both</h3>
|
||
<p>
|
||
Most of the scrollbar plugins allow using either vertical or horizontal scrollbars.
|
||
Only a few can use both vertical and horizontal scrollbars and they are using scroll emulation
|
||
which has limitations. jQuery Scrollbar does not emulate scroll behaviour. Also it can work
|
||
with both vertical and horizontal scrollbars together.
|
||
</p>
|
||
|
||
<h3>Automatically re-initializes scrollbars</h3>
|
||
<p>
|
||
Usually scrollbar size and positions are calculated when plugin is initialized. What if content or container
|
||
size is changed with javascript/ajax? - You have to update plugin to recalculate scrollbar sizes. And it's
|
||
OK because you know when content is changed. But what to do if you don't know when it is changed? For
|
||
example, if content contains images without height/width. These images change content size after loading.
|
||
There are 3 obvious ways: always set image height/width (and force users to set image size for content added
|
||
with WYSIWYG editor), wait for whole page to load and then initialize scrollbars or handle content images
|
||
loading and then re-initialize scrollbar plugin. Annoying, isn't it?
|
||
</p>
|
||
<p>
|
||
jQuery Scrollbar handles content/container size changes and recalculate scrollbar sizes automatically. Just
|
||
initialize it once and forget about it.
|
||
</p>
|
||
|
||
<h3>Supports external scrollbars</h3>
|
||
<p>
|
||
jQuery Scrollbar supports 3 types of scrollbars: <strong>inner</strong> — scrollbar is displayed over
|
||
content (Apple Mac OS); <strong>outer</strong> — scrollbar shifts content to display itself (Microsoft
|
||
Windows scrollbars); <strong>external</strong> — scrollbar is located in any place of your page. So,
|
||
you can choose between Apple Mac and Windows style scrollbar or even place it outside of the container and
|
||
style it as you wish. Cool, isn't it?
|
||
</p>
|
||
|
||
<h3>Provides a AngularJS directive</h3>
|
||
<p>
|
||
Now you can easily use jQuery Scrollbar with AngularJS as directive. Just include module <em>jQueryScrollbar</em>
|
||
as dependency in your module, and you can use jQuery Scrollbar on your container with attribute
|
||
<em>data-jquery-scrollbar</em>. <a href="demo/angular.html">jQuery Scrollbar as AngularJS directive</a>.
|
||
</p>
|
||
|
||
<h3>Textarea scrollbars</h3>
|
||
<p>
|
||
Apply jQuery Scrollbar to your textarea and enjoy CSS styled scrollbars. Supports IE8+. Fixed height/width are required.
|
||
</p>
|
||
|
||
<h3>Browser support: IE7+, Edge, Firefox, Opera, Chrome, Safari</h3>
|
||
<p>
|
||
Of course all modern browsers are supported starting from IE7. The most problematic browser is IE, as you
|
||
already suspect. But it's not IE7, it's IE8! Surprised? I was! IE7 works better with height/width
|
||
calculations than IE8. IE8 renderer is crashed when using <em>max-height</em> with <em>overflow:auto</em>.
|
||
It is officially logged as a <a href="https://www.google.com/#q=IE8+max+height+crash" target="_blank">bug</a>
|
||
in the final version of IE8 with no fix. There are also other bugs with max-height/max-width and positioning.
|
||
So, be careful if you are going to support IE8.
|
||
</p>
|
||
|
||
<h4>Advanced features that standard scroll has, but scroll emulation plugins have to emulate or don't have at all</h4>
|
||
<ul>
|
||
<li>mouse middle button / touch / arrow buttons scrolling</li>
|
||
<li>auto content scrolling when selecting text</li>
|
||
<li>auto scrolling to focused element</li>
|
||
</ul>
|
||
|
||
<h2>jQuery Scrollbar Options</h2>
|
||
<ul>
|
||
<li>
|
||
<strong>autoScrollSize</strong> [true|false] (default: true)<br/>
|
||
automatically calculate scrollbar size depending on container/content size
|
||
</li>
|
||
<li>
|
||
<strong>autoUpdate</strong> [true|false] (default: true)<br/>
|
||
automatically update scrollbar if container/content size is changed
|
||
</li>
|
||
<li>
|
||
<strong>disableBodyScroll</strong> [true|false] (default: false)<br/>
|
||
if this option is enabled and the mouse is over the scrollable container, the main page won't be scrolled
|
||
</li>
|
||
<li>
|
||
<strong>duration</strong> [ms] (default: 200)<br/>
|
||
scroll speed duration when the mouse is over scrollbar (scroll emulating mode)
|
||
</li>
|
||
<li>
|
||
<strong>ignoreMobile</strong> [true|false] (default: false)<br/>
|
||
do not initialize custom scrollbars on mobile devices
|
||
</li>
|
||
<li>
|
||
<strong>ignoreOverlay</strong> [true|false] (default: false)<br/>
|
||
do not initialize custom scrollbars in browsers when native scrollbars
|
||
overlay content (Mac OS, mobile devices, etc...)
|
||
</li>
|
||
<li>
|
||
<strong>scrollStep</strong> [px] (default: 30)<br/>
|
||
scroll step when the mouse is over the scrollbar (scroll emulating mode)
|
||
</li>
|
||
<li>
|
||
<strong>showArrows</strong> [true|false] (default: false)<br/>
|
||
add a class to show scrollbar arrows in the advanced scrollbar
|
||
</li>
|
||
<li>
|
||
<strong>stepScrolling</strong> [true|false] (default: true)<br/>
|
||
emulate step scrolling on mousedown over scrollbar
|
||
</li>
|
||
<li>
|
||
<strong>scrollx</strong> [string|element] (default: simple)<br/>
|
||
<i>simple</i>, <i>advanced</i>, HTML or jQuery element for horizontal scrollbar
|
||
</li>
|
||
<li>
|
||
<strong>scrolly</strong> [string|element] (default: simple)<br/>
|
||
<i>simple</i>, <i>advanced</i>, HTML or jQuery element for vertical scrollbar
|
||
</li>
|
||
<li>
|
||
<strong>onDestroy</strong> [function] (default: null)<br/>
|
||
callback function when scrollbar is destroyed
|
||
</li>
|
||
<li>
|
||
<strong>onInit</strong> [function] (default: null)<br/>
|
||
callback function when scrollbar is initialized at the first time
|
||
</li>
|
||
<li>
|
||
<strong>onScroll</strong> [function] (default: null)<br/>
|
||
callback function when container is scrolled
|
||
</li>
|
||
<li>
|
||
<strong>onUpdate</strong> [function] (default: null)<br/>
|
||
callback function before scrollbars size is calculated
|
||
</li>
|
||
</ul>
|
||
|
||
<h2>Limitations</h2>
|
||
<ul>
|
||
<li>scrollable elements should not have paddings, margins, left/top values</li>
|
||
<li>do not use max-height in IE8 – it crashes browser renderer</li>
|
||
<li>custom scroll is not initialized in Firefox under MacOS because of a bug while hiding native overlay scrollbar</li>
|
||
<li>custom scroll works incorrectly if containers children's height is set in percent of parent (issue <a href="https://github.com/gromo/jquery.scrollbar/issues/57">#57</a>)</li>
|
||
</ul>
|
||
|
||
<h2>FAQ</h2>
|
||
<ol>
|
||
<li>
|
||
<p>
|
||
<strong>Question:</strong> I need padding between border/scrollbar and text, but scrollbar does not
|
||
allow it. What should I do?
|
||
</p>
|
||
<p>
|
||
<strong>Answer:</strong> Wrap the inner content in the div with padding
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<strong>Question:</strong> I need space between content with scrollbar and the rest of the page.
|
||
What should I do?
|
||
</p>
|
||
<p>
|
||
<strong>Answer:</strong> Wrap the scrollable content into container with padding.
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<strong>Question:</strong> If content contains images, content size can be changed after images will
|
||
be loaded. Should I re-initialize scrollbar?
|
||
</p>
|
||
<p>
|
||
<strong>Answer:</strong> No, scrollbar detects content/container size changes automatically and
|
||
recalculates its size or hides/shows scrollbars.
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<strong>Question:</strong> How can I scroll content to a custom position?
|
||
</p>
|
||
<p>
|
||
<strong>Answer:</strong> Use standard jQuery scrollTop/scrollLeft functions on the container.
|
||
For example if you have a container with a class "scrollbar-macosx" use the following code to scroll 50px from top:
|
||
<pre class="prettyprint linenums lang-js">
|
||
jQuery('.scrollbar-macosx').scrollTop(50);</pre>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<strong>Question:</strong> I want to know when the content is scrolled. Is there any callback for this?
|
||
</p>
|
||
<p>
|
||
<strong>Answer:</strong> Yes, you can use "onScroll" callback (look at AngularJS example),
|
||
or use the standard "scroll" event on the container. For example you have a container with a class
|
||
"scrollbar-macosx", then use the following code to handle the scroll event:
|
||
<pre class="prettyprint linenums lang-js">
|
||
jQuery('.scrollbar-macosx').not('.scroll-wrapper').on("scroll", function(){
|
||
console.log('content is scrolling');
|
||
});</pre>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<strong>Question:</strong> The scrollbar does not replace the standard scrollbar. What should I do?
|
||
</p>
|
||
<p>
|
||
<strong>Answer:</strong> It's not a good idea to replace the standard scrollbar for a whole page. But if you
|
||
really need it, wrap all page into container with height/width 100%, overflow: auto and apply
|
||
the scrollbar to this container.
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<strong>Question:</strong> I don't want to see horizontal scrollbar ever. What should I do?
|
||
</p>
|
||
<p>
|
||
<strong>Answer:</strong> Hide it with CSS like this:
|
||
<pre class="prettyprint linenums lang-css">
|
||
.scroll-element.scroll-x {
|
||
display: none !important;
|
||
}</pre>
|
||
But don't forget that even if the scrollbar is hidden, the content still may be scrollable horizontally.
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<strong>Question:</strong> Using jQuery's .width() or .height() on a container
|
||
will return incorrect values. What is going on?
|
||
</p>
|
||
<p>
|
||
<strong>Answer:</strong> Inner scrollable content uses additional height/width & offset of the scrollbar
|
||
to hide it. To get correct height/width values use the visible container:
|
||
<pre class="prettyprint linenums lang-js">
|
||
jQuery('.scrollbar-macosx').not('.scroll-content').height();
|
||
jQuery('.scrollbar-macosx').not('.scroll-content').width();</pre>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<strong>Question:</strong> How to detect when a DIV is scrolled to the bottom edge?
|
||
</p>
|
||
<p>
|
||
<strong>Answer:</strong> You can make calculations using jQuery's "scroll" event or you can use
|
||
the "onScroll" callback function that provides information about container's sizes & offset:
|
||
<pre class="prettyprint linenums lang-js">
|
||
jQuery('.scrollbar-dynamic').scrollbar({
|
||
"onScroll": function(y, x){
|
||
if(y.scroll == y.maxScroll){
|
||
console.log('Scrolled to bottom');
|
||
}
|
||
}
|
||
});</pre>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<strong>Question:</strong> Can I use jQuery Scrollbar to customize textarea scrollbar?
|
||
</p>
|
||
<p>
|
||
<strong>Answer:</strong> Yes, you can. Textarea scrollbars are supported now.
|
||
Look at <a href="demo/basic.html">Basic Scrollbars Demo</a> page.
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<strong>Question:</strong> Is it possible to set scrollbars max/min size?
|
||
</p>
|
||
<p>
|
||
<strong>Answer:</strong> Use CSS max-height/min-height (max-width/min-width) to set scrollbar size limits.
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<strong>Question:</strong> I have a question / want to report an issue. How can I contact the author?
|
||
</p>
|
||
<p>
|
||
<strong>Answer:</strong> Please send an email to <a href="mailto:13real008@gmail.com">13real008@gmail.com</a>
|
||
</p>
|
||
</li>
|
||
</ol>
|
||
|
||
<h5 style="display:none;">
|
||
<a href="https://docs.google.com/spreadsheet/ccc?key=0Ao4HbHsCLP0YdEhnZVh1WGZSbXloekZiNWlaNElnTnc&usp=sharing"
|
||
target="_blank">Compare with other popular scrollbars</a>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|