1386 lines
84 KiB
HTML
1386 lines
84 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Scrollbar Demo</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" />
|
|
|
|
<script src="../includes/prettify/prettify.js"></script>
|
|
<script src="../includes/jquery.js"></script>
|
|
<script src="../jquery.scrollbar.js"></script>
|
|
<script>
|
|
jQuery(function($){
|
|
|
|
function getAlignedText(text){
|
|
text = text.split('\n');
|
|
while(text.length > 0 && $.trim(text[0]) == ''){
|
|
text.shift();
|
|
}
|
|
var tabs = (text[0] || '').replace(/^(\s+).+$/, '$1');
|
|
for(var i=0; i<text.length; i++){
|
|
text[i] = text[i].replace(tabs, '');
|
|
}
|
|
if(text.length > 0 && text[text.length - 1].match(/^\s*$/)){
|
|
text.pop();
|
|
}
|
|
return text.join('\n');
|
|
}
|
|
|
|
$('.container').each(function(){
|
|
|
|
var content = $(this).find('.content');
|
|
var controls = $(this).find('.controls');
|
|
|
|
$('<pre></pre>').addClass('prettyprint linenums lang-html').text(getAlignedText(content.find('.demo').html())).appendTo(content.find('.html'));
|
|
$('<pre></pre>').addClass('prettyprint linenums lang-css').text(getAlignedText($('#css-common').html()) + "\n" + getAlignedText(content.find('style').html())).appendTo(content.find('.css'));
|
|
$('<pre></pre>').addClass('prettyprint linenums lang-js').text(getAlignedText(content.find('script').html())).appendTo(content.find('.js'));
|
|
|
|
controls.on('click', 'span', function(){
|
|
content.find('.' + $(this).removeClass('active').attr('class')).show().siblings('div').hide();
|
|
$(this).addClass('active').siblings('span').removeClass('active');
|
|
});
|
|
controls.find('.demo').click();
|
|
});
|
|
|
|
$('.container').on('click', '.add-content', function(){
|
|
$('#lorem-ipsum').clone().removeAttr('id').appendTo($(this).closest('.container').find('.scroll-content'));
|
|
return false;
|
|
});
|
|
$('.container').on('click', '.remove-content', function(){
|
|
$(this).closest('.container').find('.scroll-content').find('p').not('.permanent').last().remove();
|
|
return false;
|
|
});
|
|
|
|
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>
|
|
|
|
<style type="text/css" id="css-common">
|
|
/*************** SCROLLBAR BASE CSS ***************/
|
|
|
|
.scroll-wrapper {
|
|
overflow: hidden !important;
|
|
padding: 0 !important;
|
|
position: relative;
|
|
}
|
|
|
|
.scroll-wrapper > .scroll-content {
|
|
border: none !important;
|
|
box-sizing: content-box !important;
|
|
height: auto;
|
|
left: 0;
|
|
margin: 0;
|
|
max-height: none;
|
|
max-width: none !important;
|
|
overflow: scroll !important;
|
|
padding: 0;
|
|
position: relative !important;
|
|
top: 0;
|
|
width: auto !important;
|
|
}
|
|
|
|
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.scroll-element {
|
|
display: none;
|
|
}
|
|
.scroll-element, .scroll-element div {
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.scroll-element.scroll-x.scroll-scrollx_visible,
|
|
.scroll-element.scroll-y.scroll-scrolly_visible {
|
|
display: block;
|
|
}
|
|
|
|
.scroll-element .scroll-bar,
|
|
.scroll-element .scroll-arrow {
|
|
cursor: default;
|
|
}
|
|
|
|
.scroll-textarea {
|
|
border: 1px solid #cccccc;
|
|
border-top-color: #999999;
|
|
}
|
|
.scroll-textarea > .scroll-content {
|
|
overflow: hidden !important;
|
|
}
|
|
.scroll-textarea > .scroll-content > textarea {
|
|
border: none !important;
|
|
box-sizing: border-box;
|
|
height: 100% !important;
|
|
margin: 0;
|
|
max-height: none !important;
|
|
max-width: none !important;
|
|
overflow: scroll !important;
|
|
outline: none;
|
|
padding: 2px;
|
|
position: relative !important;
|
|
top: 0;
|
|
width: 100% !important;
|
|
}
|
|
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrapper scrollbar-dynamic">
|
|
<div class="page-content">
|
|
|
|
<h1>Basic Scrollbars</h1>
|
|
<p style="font-style:italic;">Resize window to 600px width to see horizontal scrollbar</p>
|
|
|
|
<a href="advanced.html">Advanced Scrollbars Demo</a><br/>
|
|
<a href="angular.html">jQuery Scrollbars as Angular.JS directive</a><br/>
|
|
<a href="../">« Back to home</a>
|
|
|
|
<p id="lorem-ipsum">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
|
|
<div class="container">
|
|
<h2>Simple Inner</h2>
|
|
<div class="controls">
|
|
<span class="demo">DEMO</span>
|
|
<span class="html">HTML</span>
|
|
<span class="css">CSS</span>
|
|
<span class="js">JS</span>
|
|
<button class="add-content">Add Content</button>
|
|
<button class="remove-content">Remove Content</button>
|
|
</div>
|
|
<div class="content">
|
|
<style type="text/css">
|
|
|
|
/*************** SIMPLE INNER SCROLLBAR ***************/
|
|
|
|
.scrollbar-inner > .scroll-element,
|
|
.scrollbar-inner > .scroll-element div
|
|
{
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
|
|
.scrollbar-inner > .scroll-element div {
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-inner > .scroll-element.scroll-x {
|
|
bottom: 2px;
|
|
height: 8px;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-inner > .scroll-element.scroll-y {
|
|
height: 100%;
|
|
right: 2px;
|
|
top: 0;
|
|
width: 8px;
|
|
}
|
|
|
|
.scrollbar-inner > .scroll-element .scroll-element_outer {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scrollbar-inner > .scroll-element .scroll-element_outer,
|
|
.scrollbar-inner > .scroll-element .scroll-element_track,
|
|
.scrollbar-inner > .scroll-element .scroll-bar {
|
|
-webkit-border-radius: 8px;
|
|
-moz-border-radius: 8px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.scrollbar-inner > .scroll-element .scroll-element_track,
|
|
.scrollbar-inner > .scroll-element .scroll-bar {
|
|
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
|
|
filter: alpha(opacity=40);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; }
|
|
.scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; }
|
|
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; }
|
|
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }
|
|
|
|
|
|
/* update scrollbar offset if both scrolls are visible */
|
|
|
|
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
|
|
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }
|
|
|
|
|
|
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
|
|
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }
|
|
|
|
</style>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function(){
|
|
jQuery('.scrollbar-inner').scrollbar();
|
|
});
|
|
</script>
|
|
<div class="demo">
|
|
<div class="scrollbar-inner">
|
|
<p class="permanent">
|
|
Simple inner scrollbar over content
|
|
</p>
|
|
<p class="permanent">
|
|
<a href="#anchor">Click to test #anchors</a><br/><br/>
|
|
<input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;">
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<input type="text"><br/>
|
|
<h3 id="anchor">Anchor</h3>
|
|
</div>
|
|
</div>
|
|
<div class="html"></div>
|
|
<div class="css"></div>
|
|
<div class="js"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Simple Outer</h2>
|
|
<div class="controls">
|
|
<span class="demo">DEMO</span>
|
|
<span class="html">HTML</span>
|
|
<span class="css">CSS</span>
|
|
<span class="js">JS</span>
|
|
<button class="add-content">Add Content</button>
|
|
<button class="remove-content">Remove Content</button>
|
|
</div>
|
|
<div class="content">
|
|
<style type="text/css">
|
|
|
|
/*************** SIMPLE OUTER SCROLLBAR ***************/
|
|
|
|
.scrollbar-outer > .scroll-element,
|
|
.scrollbar-outer > .scroll-element div
|
|
{
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
|
|
.scrollbar-outer > .scroll-element {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.scrollbar-outer > .scroll-element div {
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-outer > .scroll-element.scroll-x {
|
|
bottom: 0;
|
|
height: 12px;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-outer > .scroll-element.scroll-y {
|
|
height: 100%;
|
|
right: 0;
|
|
top: 0;
|
|
width: 12px;
|
|
}
|
|
|
|
.scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer { height: 8px; top: 2px; }
|
|
.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { left: 2px; width: 8px; }
|
|
|
|
.scrollbar-outer > .scroll-element .scroll-element_outer { overflow: hidden; }
|
|
.scrollbar-outer > .scroll-element .scroll-element_track { background-color: #eeeeee; }
|
|
|
|
.scrollbar-outer > .scroll-element .scroll-element_outer,
|
|
.scrollbar-outer > .scroll-element .scroll-element_track,
|
|
.scrollbar-outer > .scroll-element .scroll-bar {
|
|
-webkit-border-radius: 8px;
|
|
-moz-border-radius: 8px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.scrollbar-outer > .scroll-element .scroll-bar { background-color: #d9d9d9; }
|
|
.scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: #c2c2c2; }
|
|
.scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }
|
|
|
|
|
|
/* scrollbar height/width & offset from container borders */
|
|
|
|
.scrollbar-outer > .scroll-content.scroll-scrolly_visible { left: -12px; margin-left: 12px; }
|
|
.scrollbar-outer > .scroll-content.scroll-scrollx_visible { top: -12px; margin-top: 12px; }
|
|
|
|
.scrollbar-outer > .scroll-element.scroll-x .scroll-bar { min-width: 10px; }
|
|
.scrollbar-outer > .scroll-element.scroll-y .scroll-bar { min-height: 10px; }
|
|
|
|
|
|
/* update scrollbar offset if both scrolls are visible */
|
|
|
|
.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -14px; }
|
|
.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -14px; }
|
|
|
|
.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -14px; }
|
|
.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -14px; }
|
|
|
|
</style>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function(){
|
|
jQuery('.scrollbar-outer').scrollbar();
|
|
});
|
|
</script>
|
|
<div class="demo">
|
|
<div class="scrollbar-outer">
|
|
<p class="permanent">
|
|
Simple outer scrollbar can be used as CSS base for custom outer scrollbars.
|
|
This example shows nested scrollbars functionality: nested scrollbar styles do not
|
|
interfere with parent scrollbar styles, i.e. different scrollbars can be safely used
|
|
inside each other.
|
|
</p>
|
|
<div class="inner-content scrollbar-dynamic">
|
|
<div style="padding: 10px;">
|
|
<h4>
|
|
This container is an example of nested Dynamic scrollbar with padding.
|
|
</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="html"></div>
|
|
<div class="css"></div>
|
|
<div class="js"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Mac OS X Lion</h2>
|
|
<div class="controls">
|
|
<span class="demo">DEMO</span>
|
|
<span class="html">HTML</span>
|
|
<span class="css">CSS</span>
|
|
<span class="js">JS</span>
|
|
<button class="add-content">Add Content</button>
|
|
<button class="remove-content">Remove Content</button>
|
|
</div>
|
|
<div class="content">
|
|
<style type="text/css">
|
|
|
|
/*************** SCROLLBAR MAC OS X ***************/
|
|
|
|
.scrollbar-macosx > .scroll-element,
|
|
.scrollbar-macosx > .scroll-element div
|
|
{
|
|
background: none;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
|
|
.scrollbar-macosx > .scroll-element div {
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-macosx > .scroll-element .scroll-element_track { display: none; }
|
|
.scrollbar-macosx > .scroll-element .scroll-bar {
|
|
background-color: #6C6E71;
|
|
display: block;
|
|
|
|
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity=0);
|
|
opacity: 0;
|
|
|
|
-webkit-border-radius: 7px;
|
|
-moz-border-radius: 7px;
|
|
border-radius: 7px;
|
|
|
|
-webkit-transition: opacity 0.2s linear;
|
|
-moz-transition: opacity 0.2s linear;
|
|
-o-transition: opacity 0.2s linear;
|
|
-ms-transition: opacity 0.2s linear;
|
|
transition: opacity 0.2s linear;
|
|
}
|
|
.scrollbar-macosx:hover > .scroll-element .scroll-bar,
|
|
.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar {
|
|
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
|
filter: alpha(opacity=70);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
|
|
.scrollbar-macosx > .scroll-element.scroll-x {
|
|
bottom: 0px;
|
|
height: 0px;
|
|
left: 0;
|
|
min-width: 100%;
|
|
overflow: visible;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-macosx > .scroll-element.scroll-y {
|
|
height: 100%;
|
|
min-height: 100%;
|
|
right: 0px;
|
|
top: 0;
|
|
width: 0px;
|
|
}
|
|
|
|
/* scrollbar height/width & offset from container borders */
|
|
.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; }
|
|
.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; }
|
|
|
|
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; }
|
|
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
|
|
|
|
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; }
|
|
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
|
|
|
|
/* update scrollbar offset if both scrolls are visible */
|
|
.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
|
|
.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }
|
|
|
|
</style>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function(){
|
|
jQuery('.scrollbar-macosx').scrollbar();
|
|
});
|
|
</script>
|
|
<div class="demo">
|
|
<div class="scrollbar-macosx">
|
|
<p class="permanent">
|
|
Traditionally scrollbars are permanently displayed whenever an area of a webpage is
|
|
scrollable. By contrast, scrollbars in OSX Lion are hidden from sight, and revealed only
|
|
when scrolling content. In this example, scrollbars are revealed when mouse is over content.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="html"></div>
|
|
<div class="css"></div>
|
|
<div class="js"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Light</h2>
|
|
<div class="controls">
|
|
<span class="demo">DEMO</span>
|
|
<span class="html">HTML</span>
|
|
<span class="css">CSS</span>
|
|
<span class="js">JS</span>
|
|
<button class="add-content">Add Content</button>
|
|
<button class="remove-content">Remove Content</button>
|
|
</div>
|
|
<div class="content">
|
|
<style type="text/css">
|
|
|
|
/*************** SCROLLBAR LIGHT ***************/
|
|
|
|
.scrollbar-light > .scroll-element,
|
|
.scrollbar-light > .scroll-element div {
|
|
border: none;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
|
|
.scrollbar-light > .scroll-element {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.scrollbar-light > .scroll-element div {
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-light > .scroll-element .scroll-element_outer {
|
|
-webkit-border-radius: 10px;
|
|
-moz-border-radius: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.scrollbar-light > .scroll-element .scroll-element_size {
|
|
background: #dbdbdb;
|
|
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi
|
|
8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2
|
|
VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaW
|
|
VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2
|
|
Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMC
|
|
UiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD
|
|
0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdm
|
|
c+);
|
|
background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dbdbdb), color-stop(100%,#e8e8e8));
|
|
background: -webkit-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
|
|
background: -o-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
|
|
background: -ms-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
|
|
background: linear-gradient(to right, #dbdbdb 0%,#e8e8e8 100%);
|
|
|
|
-webkit-border-radius: 10px;
|
|
-moz-border-radius: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.scrollbar-light > .scroll-element.scroll-x {
|
|
bottom: 0;
|
|
height: 17px;
|
|
left: 0;
|
|
min-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-light > .scroll-element.scroll-y {
|
|
height: 100%;
|
|
min-height: 100%;
|
|
right: 0;
|
|
top: 0;
|
|
width: 17px;
|
|
}
|
|
|
|
.scrollbar-light > .scroll-element .scroll-bar {
|
|
background: #fefefe;
|
|
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi
|
|
8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2
|
|
VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaW
|
|
VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2
|
|
Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMC
|
|
UiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD
|
|
0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdm
|
|
c+);
|
|
background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fefefe), color-stop(100%,#f5f5f5));
|
|
background: -webkit-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
|
|
background: -o-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
|
|
background: -ms-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
|
|
background: linear-gradient(to right, #fefefe 0%,#f5f5f5 100%);
|
|
|
|
border: 1px solid #dbdbdb;
|
|
-webkit-border-radius: 10px;
|
|
-moz-border-radius: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* scrollbar height/width & offset from container borders */
|
|
|
|
.scrollbar-light > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
|
|
.scrollbar-light > .scroll-content.scroll-scrollx_visible { top: -17px; margin-top: 17px; }
|
|
|
|
.scrollbar-light > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 0px; }
|
|
.scrollbar-light > .scroll-element.scroll-y .scroll-bar { left: 0px; min-height: 10px; width: 10px; }
|
|
|
|
.scrollbar-light > .scroll-element.scroll-x .scroll-element_outer { height: 12px; left: 2px; top: 2px; }
|
|
.scrollbar-light > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
|
|
|
|
.scrollbar-light > .scroll-element.scroll-y .scroll-element_outer { left: 2px; top: 2px; width: 12px; }
|
|
.scrollbar-light > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
|
|
|
|
/* update scrollbar offset if both scrolls are visible */
|
|
|
|
.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; }
|
|
.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; }
|
|
|
|
.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; }
|
|
.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; }
|
|
|
|
</style>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function(){
|
|
jQuery('.scrollbar-light').scrollbar();
|
|
});
|
|
</script>
|
|
<div class="demo">
|
|
<div class="scrollbar-light">
|
|
<input type="text">
|
|
<p class="permanent">
|
|
Light version of scrollbar is great for different custom design solutions.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<input type="text">
|
|
</div>
|
|
</div>
|
|
<div class="html"></div>
|
|
<div class="css"></div>
|
|
<div class="js"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Rail</h2>
|
|
<div class="controls">
|
|
<span class="demo">DEMO</span>
|
|
<span class="html">HTML</span>
|
|
<span class="css">CSS</span>
|
|
<span class="js">JS</span>
|
|
<button class="add-content">Add Content</button>
|
|
<button class="remove-content">Remove Content</button>
|
|
</div>
|
|
<div class="content">
|
|
<style type="text/css">
|
|
|
|
/*************** SCROLLBAR RAIL ***************/
|
|
|
|
.scrollbar-rail > .scroll-element,
|
|
.scrollbar-rail > .scroll-element div
|
|
{
|
|
border: none;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
|
|
.scrollbar-rail > .scroll-element {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.scrollbar-rail > .scroll-element div {
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-rail > .scroll-element .scroll-element_size {
|
|
background-color: #999;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-element_size {
|
|
background-color: #666;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.scrollbar-rail > .scroll-element.scroll-x {
|
|
bottom: 0;
|
|
height: 12px;
|
|
left: 0;
|
|
min-width: 100%;
|
|
padding: 3px 0 2px;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-rail > .scroll-element.scroll-y {
|
|
height: 100%;
|
|
min-height: 100%;
|
|
padding: 0 2px 0 3px;
|
|
right: 0;
|
|
top: 0;
|
|
width: 12px;
|
|
}
|
|
|
|
.scrollbar-rail > .scroll-element .scroll-bar {
|
|
background-color: #d0b9a0;
|
|
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px;
|
|
|
|
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-bar {
|
|
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
/* scrollbar height/width & offset from container borders */
|
|
|
|
.scrollbar-rail > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
|
|
.scrollbar-rail > .scroll-content.scroll-scrollx_visible { margin-top: 17px; top: -17px; }
|
|
|
|
.scrollbar-rail > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 1px; }
|
|
.scrollbar-rail > .scroll-element.scroll-y .scroll-bar { left: 1px; min-height: 10px; width: 10px; }
|
|
|
|
.scrollbar-rail > .scroll-element.scroll-x .scroll-element_outer { height: 15px; left: 5px; }
|
|
.scrollbar-rail > .scroll-element.scroll-x .scroll-element_size { height: 2px; left: -10px; top: 5px; }
|
|
|
|
.scrollbar-rail > .scroll-element.scroll-y .scroll-element_outer { top: 5px; width: 15px; }
|
|
.scrollbar-rail > .scroll-element.scroll-y .scroll-element_size { left: 5px; top: -10px; width: 2px; }
|
|
|
|
/* update scrollbar offset if both scrolls are visible */
|
|
|
|
.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -25px; }
|
|
.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -25px; }
|
|
|
|
.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -25px; }
|
|
.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -25px; }
|
|
|
|
</style>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function(){
|
|
jQuery('.scrollbar-rail').scrollbar();
|
|
});
|
|
</script>
|
|
<div class="demo">
|
|
<div class="scrollbar-rail">
|
|
<p class="permanent">
|
|
<strong>Scrollbar Rail</strong>
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="html"></div>
|
|
<div class="css"></div>
|
|
<div class="js"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Dynamic</h2>
|
|
<div class="controls">
|
|
<span class="demo">DEMO</span>
|
|
<span class="html">HTML</span>
|
|
<span class="css">CSS</span>
|
|
<span class="js">JS</span>
|
|
<button class="add-content">Add Content</button>
|
|
<button class="remove-content">Remove Content</button>
|
|
</div>
|
|
<div class="content">
|
|
<style type="text/css">
|
|
|
|
/*************** SCROLLBAR DYNAMIC ***************/
|
|
|
|
.scrollbar-dynamic > .scroll-element,
|
|
.scrollbar-dynamic > .scroll-element div
|
|
{
|
|
background: none;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
|
|
.scrollbar-dynamic > .scroll-element div {
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-dynamic > .scroll-element.scroll-x {
|
|
bottom: 2px;
|
|
height: 7px;
|
|
left: 0;
|
|
min-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-dynamic > .scroll-element.scroll-y {
|
|
height: 100%;
|
|
min-height: 100%;
|
|
right: 2px;
|
|
top: 0;
|
|
width: 7px;
|
|
}
|
|
|
|
.scrollbar-dynamic > .scroll-element .scroll-element_outer {
|
|
opacity: 0.3;
|
|
|
|
-webkit-border-radius: 12px;
|
|
-moz-border-radius: 12px;
|
|
border-radius: 12px;
|
|
}
|
|
.scrollbar-dynamic > .scroll-element .scroll-element_size {
|
|
background-color: #cccccc;
|
|
opacity: 0;
|
|
|
|
-webkit-border-radius: 12px;
|
|
-moz-border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
|
-webkit-transition: opacity 0.2s;
|
|
-moz-transition: opacity 0.2s;
|
|
-o-transition: opacity 0.2s;
|
|
-ms-transition: opacity 0.2s;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.scrollbar-dynamic > .scroll-element .scroll-bar {
|
|
background-color: #6c6e71;
|
|
|
|
-webkit-border-radius: 7px;
|
|
-moz-border-radius: 7px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
/* scrollbar height/width & offset from container borders */
|
|
|
|
.scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar {
|
|
bottom: 0;
|
|
height: 7px;
|
|
min-width: 24px;
|
|
top: auto;
|
|
}
|
|
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar {
|
|
left: auto;
|
|
min-height: 24px;
|
|
right: 0;
|
|
width: 7px;
|
|
}
|
|
|
|
.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer {
|
|
bottom: 0;
|
|
top: auto;
|
|
left: 2px;
|
|
|
|
-webkit-transition: height 0.2s;
|
|
-moz-transition: height 0.2s;
|
|
-o-transition: height 0.2s;
|
|
-ms-transition: height 0.2s;
|
|
transition: height 0.2s;
|
|
}
|
|
|
|
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer {
|
|
left: auto;
|
|
right: 0;
|
|
top: 2px;
|
|
|
|
-webkit-transition: width 0.2s;
|
|
-moz-transition: width 0.2s;
|
|
-o-transition: width 0.2s;
|
|
-ms-transition: width 0.2s;
|
|
transition: width 0.2s;
|
|
}
|
|
|
|
.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
|
|
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
|
|
|
|
|
|
/* update scrollbar offset if both scrolls are visible */
|
|
|
|
.scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
|
|
.scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }
|
|
|
|
|
|
/* hover & drag */
|
|
|
|
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer,
|
|
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer {
|
|
overflow: hidden;
|
|
|
|
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
|
filter: alpha(opacity=70);
|
|
opacity: 0.7;
|
|
}
|
|
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size,
|
|
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size {
|
|
opacity: 1;
|
|
}
|
|
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar,
|
|
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
-webkit-border-radius: 12px;
|
|
-moz-border-radius: 12px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer,
|
|
.scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer {
|
|
height: 20px;
|
|
min-height: 7px;
|
|
}
|
|
.scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer,
|
|
.scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer {
|
|
min-width: 7px;
|
|
width: 20px;
|
|
}
|
|
|
|
</style>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function(){
|
|
jQuery('.scrollbar-dynamic').scrollbar();
|
|
});
|
|
</script>
|
|
<div class="demo">
|
|
<div class="scrollbar-dynamic">
|
|
<p class="permanent">
|
|
Dynamic scrollbar looks tiny and transparent, and does not interfere with reading content.
|
|
It increases its size when mouse is over, showing also full scroll container.
|
|
Because of bugs with opacity in IE, this scrollbar is not recommended for IE7-8.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="html"></div>
|
|
<div class="css"></div>
|
|
<div class="js"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Google Chrome</h2>
|
|
<div class="controls">
|
|
<span class="demo">DEMO</span>
|
|
<span class="html">HTML</span>
|
|
<span class="css">CSS</span>
|
|
<span class="js">JS</span>
|
|
<button class="add-content">Add Content</button>
|
|
<button class="remove-content">Remove Content</button>
|
|
</div>
|
|
<div class="content">
|
|
<style type="text/css">
|
|
|
|
/*************** SCROLLBAR GOOGLE CHROME ***************/
|
|
|
|
.scrollbar-chrome > .scroll-element,
|
|
.scrollbar-chrome > .scroll-element div
|
|
{
|
|
border: none;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
|
|
.scrollbar-chrome > .scroll-element {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.scrollbar-chrome > .scroll-element div {
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-chrome > .scroll-element .scroll-element_outer {}
|
|
|
|
.scrollbar-chrome > .scroll-element .scroll-element_track {
|
|
background: #f1f1f1;
|
|
border: 1px solid #dbdbdb;
|
|
}
|
|
|
|
.scrollbar-chrome > .scroll-element.scroll-x {
|
|
bottom: 0;
|
|
height: 16px;
|
|
left: 0;
|
|
min-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrollbar-chrome > .scroll-element.scroll-y {
|
|
height: 100%;
|
|
min-height: 100%;
|
|
right: 0;
|
|
top: 0;
|
|
width: 16px;
|
|
}
|
|
|
|
.scrollbar-chrome > .scroll-element .scroll-bar {
|
|
background-color: #d9d9d9;
|
|
border: 1px solid #bdbdbd;
|
|
cursor: default;
|
|
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.scrollbar-chrome > .scroll-element .scroll-bar:hover {
|
|
background-color: #c2c2c2;
|
|
border-color: #a9a9a9;
|
|
}
|
|
|
|
.scrollbar-chrome > .scroll-element.scroll-draggable .scroll-bar {
|
|
background-color: #919191;
|
|
border-color: #7e7e7e;
|
|
}
|
|
|
|
/* scrollbar height/width & offset from container borders */
|
|
|
|
.scrollbar-chrome > .scroll-content.scroll-scrolly_visible { left: -16px; margin-left: 16px; }
|
|
.scrollbar-chrome > .scroll-content.scroll-scrollx_visible { top: -16px; margin-top: 16px; }
|
|
|
|
.scrollbar-chrome > .scroll-element.scroll-x .scroll-bar { height: 8px; min-width: 10px; top: 3px; }
|
|
.scrollbar-chrome > .scroll-element.scroll-y .scroll-bar { left: 3px; min-height: 10px; width: 8px; }
|
|
|
|
.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer { border-left: 1px solid #dbdbdb; }
|
|
.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track { height: 14px; left: -3px; }
|
|
.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size { height: 14px; left: -4px; }
|
|
|
|
.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer { border-top: 1px solid #dbdbdb; }
|
|
.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track { top: -3px; width: 14px; }
|
|
.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size { top: -4px; width: 14px; }
|
|
|
|
/* update scrollbar offset if both scrolls are visible */
|
|
|
|
.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; }
|
|
.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; }
|
|
|
|
.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; }
|
|
.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; }
|
|
|
|
</style>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function(){
|
|
jQuery('.scrollbar-chrome').scrollbar();
|
|
});
|
|
</script>
|
|
<div class="demo">
|
|
<div class="scrollbar-chrome">
|
|
<p class="permanent">
|
|
Google Chrome scrollbar
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
|
viverra nisi, in interdum massa nibh nec erat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="html"></div>
|
|
<div class="css"></div>
|
|
<div class="js"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Textarea Scrollbar (IE8+)</h2>
|
|
<div class="controls">
|
|
<span class="demo">DEMO</span>
|
|
<span class="html">HTML</span>
|
|
<span class="css">CSS</span>
|
|
<span class="js">JS</span>
|
|
</div>
|
|
<div class="content">
|
|
<style type="text/css">
|
|
|
|
/*************** TEXTAREA STYLES ***************/
|
|
|
|
.textarea-scrollbar {
|
|
height: 250px;
|
|
width: 500px;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function(){
|
|
jQuery('.textarea-scrollbar').scrollbar();
|
|
});
|
|
</script>
|
|
<div class="demo">
|
|
<textarea class="textarea-scrollbar scrollbar-outer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.</textarea>
|
|
</div>
|
|
<div class="html"></div>
|
|
<div class="css"></div>
|
|
<div class="js"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|