Skip to content

Commit f734916

Browse files
committed
Added alwaysVisible configuration option. When set to true scrollbar
is initially visible and it does not hide on mouse in/out.
1 parent dfae83a commit f734916

File tree

4 files changed

+44
-22
lines changed

4 files changed

+44
-22
lines changed

index.htm

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<h1>jQuery slimScroll</h1>
2323
<h2>Facebook-like jQuery Scrollbar</h1>
2424

25-
<hr /><h2>chainability test</h2>
25+
<hr /><h2>chainability test & always visible test</h2>
2626
<div id="test1">
2727
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
2828
<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
@@ -72,7 +72,7 @@ <h2>Facebook-like jQuery Scrollbar</h1>
7272
<p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
7373
</div></td> <tr>
7474
</table>
75-
<hr /><h2>No initial content test</h2>
75+
<hr /><h2>No initial content test & always visible</h2>
7676
<div id="noinitialcontent"></div>
7777

7878
<hr /><h2>Not enough content to scroll test</h2>
@@ -87,7 +87,8 @@ <h2>Facebook-like jQuery Scrollbar</h1>
8787
<script type="text/javascript">
8888
$(function(){
8989
$('#test1').slimScroll({
90-
height: '250px'
90+
height: '250px',
91+
alwaysVisible: true
9192
}).css({ background: '#ccc', paddingRight: '10px' });
9293
$('#test2').slimScroll({
9394
position: 'left',
@@ -108,7 +109,10 @@ <h2>Facebook-like jQuery Scrollbar</h1>
108109
});
109110
//no initial content
110111
var somecontent = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>";
111-
$('#noinitialcontent').slimScroll({ width: '300px' }).html(somecontent);
112+
$('#noinitialcontent').slimScroll({
113+
width: '300px',
114+
alwaysVisible: true
115+
}).html(somecontent);
112116

113117
//not long enough test
114118
$('#notlongenough').slimScroll({ width:'400px', height:'300px' });

index.min.htm

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<h1>jQuery slimScroll</h1>
2323
<h2>Facebook-like jQuery Scrollbar</h1>
2424

25-
<hr /><h2>chainability test</h2>
25+
<hr /><h2>chainability test & always visible test</h2>
2626
<div id="test1">
2727
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>
2828
<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
@@ -72,7 +72,7 @@ <h2>Facebook-like jQuery Scrollbar</h1>
7272
<p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
7373
</div></td> <tr>
7474
</table>
75-
<hr /><h2>No initial content test</h2>
75+
<hr /><h2>No initial content test & always visible</h2>
7676
<div id="noinitialcontent"></div>
7777

7878
<hr /><h2>Not enough content to scroll test</h2>
@@ -87,7 +87,8 @@ <h2>Facebook-like jQuery Scrollbar</h1>
8787
<script type="text/javascript">
8888
$(function(){
8989
$('#test1').slimScroll({
90-
height: '250px'
90+
height: '250px',
91+
alwaysVisible: true
9192
}).css({ background: '#ccc', paddingRight: '10px' });
9293
$('#test2').slimScroll({
9394
position: 'left',
@@ -108,7 +109,10 @@ <h2>Facebook-like jQuery Scrollbar</h1>
108109
});
109110
//no initial content
110111
var somecontent = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p><p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>";
111-
$('#noinitialcontent').slimScroll({ width: '300px' }).html(somecontent);
112+
$('#noinitialcontent').slimScroll({
113+
width: '300px',
114+
alwaysVisible: true
115+
}).html(somecontent);
112116

113117
//not long enough test
114118
$('#notlongenough').slimScroll({ width:'400px', height:'300px' });

slimScroll.js

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
33
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
44
*
5-
* Version: 0.2.4
5+
* Version: 0.2.5
66
*
77
*/
88
(function($) {
@@ -14,7 +14,7 @@
1414
//do it for every element that matches selector
1515
this.each(function(){
1616

17-
var isOverPanel, isOverBar, isDragg, queueHide,
17+
var isOverPanel, isOverBar, isDragg, queueHide, barHeight,
1818
divS = '<div></div>',
1919
minBarHeight = 30,
2020
wheelStep = 30,
@@ -24,7 +24,8 @@
2424
size = o.size || '7px',
2525
color = o.color || '#000',
2626
position = o.position || 'right',
27-
opacity = o.opacity || .4;
27+
opacity = o.opacity || .4,
28+
alwaysVisible = o.alwaysVisible === true;
2829

2930
//used in event handlers and for better minification
3031
var me = $(this);
@@ -62,7 +63,7 @@
6263
position: 'absolute',
6364
top: 0,
6465
opacity: opacity,
65-
display: 'none',
66+
display: alwaysVisible ? 'block' : 'none',
6667
BorderRadius: size,
6768
MozBorderRadius: size,
6869
WebkitBorderRadius: size,
@@ -182,25 +183,38 @@
182183
//attach scroll events
183184
attachWheel();
184185

185-
var showBar = function()
186+
var getBarHeight = function()
186187
{
187188
//calculate scrollbar height and make sure it is not too small
188-
var height = Math.max((me.outerHeight() / me[0].scrollHeight)
189-
* me.outerHeight(), minBarHeight);
190-
bar.css({ height: height + 'px' });
189+
barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
190+
bar.css({ height: barHeight + 'px' });
191+
}
192+
193+
//set up initial height
194+
getBarHeight();
195+
196+
var showBar = function()
197+
{
198+
//recalculate bar height
199+
getBarHeight();
191200
clearTimeout(queueHide);
192201

193-
if(height >= me.outerHeight()) {
202+
//show only when required
203+
if(barHeight >= me.outerHeight()) {
194204
return;
195205
}
196206
bar.fadeIn('fast');
197207
}
198208

199209
var hideBar = function()
200210
{
201-
queueHide = setTimeout(function(){
202-
if (!isOverBar && !isDragg) { bar.fadeOut('slow'); }
203-
}, 1000);
211+
//only hide when options allow it
212+
if (!alwaysVisible)
213+
{
214+
queueHide = setTimeout(function(){
215+
if (!isOverBar && !isDragg) { bar.fadeOut('slow'); }
216+
}, 1000);
217+
}
204218
}
205219

206220
});

slimScroll.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)