Skip to content
Browse files

Added support for setting the scroll value externally.

Now $(slimscroll-enabled-element).slimScroll({ scroll: x });
will scroll by x pixels. It can be called on any element that has been
previously enabled to use slimscroll.
  • Loading branch information...
1 parent d96513c commit 162089f1574f3422a4489c2378e9c5b265af4348 @rochal committed Feb 11, 2012
Showing with 55 additions and 24 deletions.
  1. +14 −5 index.htm
  2. +14 −5 index.min.htm
  3. +20 −7 slimScroll.js
  4. +7 −7 slimScroll.min.js
View
19 index.htm
@@ -68,7 +68,7 @@
</table>
<hr />
- <h2>rail always visible test (rail color, opacity test)</h2>
+ <h2>rail always visible test (rail color, opacity test), external setting scroll value test</h2>
<div id="testrailalwaysvisible">
@@ -79,8 +79,10 @@
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
</div>
-
- <h2>rail visible test, resumePageScroll true</h2>
+ <input type="button" id="scrollDown" value="scroll down by 50 px" />
+ <input type="button" id="scrollUp" value="scroll up by 50 px" />
+ <hr />
+ <h2>rail visible test, allowPageScroll true</h2>
<div id="testrailvisible">
@@ -177,7 +179,7 @@
$('#testrailvisible').slimscroll({
width: '300px',
railVisible: true,
- resumePageScroll: true
+ allowPageScroll: true
});
$('#testrailalwaysvisible').slimscroll({
width: '300px',
@@ -186,7 +188,14 @@
railColor: '#f00',
opacity: 1,
color: '#333'
- });
+ });
+ //scrolling buttons test
+ $('#scrollDown').click(function(){
+ $('#testrailalwaysvisible').slimScroll({ scroll: '50px' });
+ });
+ $('#scrollUp').click(function(){
+ $('#testrailalwaysvisible').slimScroll({ scroll: '-50px' });
+ });
//no initial content
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>";
$('#noinitialcontent').slimScroll({
View
19 index.min.htm
@@ -68,7 +68,7 @@
</table>
<hr />
- <h2>rail always visible test (rail color, opacity test)</h2>
+ <h2>rail always visible test (rail color, opacity test), external setting scroll value test</h2>
<div id="testrailalwaysvisible">
@@ -79,8 +79,10 @@
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>
<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>
</div>
-
- <h2>rail visible test, resumePageScroll true</h2>
+ <input type="button" id="scrollDown" value="scroll down by 50 px" />
+ <input type="button" id="scrollUp" value="scroll up by 50 px" />
+ <hr />
+ <h2>rail visible test, allowPageScroll true</h2>
<div id="testrailvisible">
@@ -177,7 +179,7 @@
$('#testrailvisible').slimscroll({
width: '300px',
railVisible: true,
- resumePageScroll: true
+ allowPageScroll: true
});
$('#testrailalwaysvisible').slimscroll({
width: '300px',
@@ -186,7 +188,14 @@
railColor: '#f00',
opacity: 1,
color: '#333'
- });
+ });
+ //scrolling buttons test
+ $('#scrollDown').click(function(){
+ $('#testrailalwaysvisible').slimScroll({ scroll: '50px' });
+ });
+ $('#scrollUp').click(function(){
+ $('#testrailalwaysvisible').slimScroll({ scroll: '-50px' });
+ });
//no initial content
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>";
$('#noinitialcontent').slimScroll({
View
27 slimScroll.js
@@ -2,7 +2,7 @@
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
- * Version: 0.4.4
+ * Version: 0.5.0
*
*/
(function($) {
@@ -27,7 +27,8 @@
railClass : 'slimScrollRail',
barClass : 'slimScrollBar',
wrapperClass : 'slimScrollDiv',
- allowPageScroll: false
+ allowPageScroll: false,
+ scroll: 0
};
var o = ops = $.extend( defaults , options );
@@ -52,14 +53,26 @@
railVisible = o.railVisible,
railColor = o.railColor,
railOpacity = o.railOpacity,
- allowPageScroll = o.allowPageScroll;
+ allowPageScroll = o.allowPageScroll,
+ scroll = o.scroll;
// used in event handlers and for better minification
var me = $(this);
//ensure we are not binding it again
if (me.parent().hasClass('slimScrollDiv'))
{
+ //check if we should scroll existing instance
+ if (scroll)
+ {
+ //find bar and rail
+ bar = me.parent().find('.slimScrollBar');
+ rail = me.parent().find('.slimScrollRail');
+
+ //scroll by given amount of pixels
+ scrollContent( me.scrollTop() + parseInt(scroll), false, true);
+ }
+
return;
}
@@ -180,7 +193,7 @@
if (!releaseScroll) { e.returnValue = false; }
}
- var scrollContent = function(y, isWheel, isJump)
+ function scrollContent(y, isWheel, isJump)
{
var delta = y;
@@ -234,7 +247,7 @@
// attach scroll events
attachWheel();
- var getBarHeight = function()
+ function getBarHeight()
{
// calculate scrollbar height and make sure it is not too small
barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
@@ -244,7 +257,7 @@
// set up initial height
getBarHeight();
- var showBar = function()
+ function showBar()
{
// recalculate bar height
getBarHeight();
@@ -263,7 +276,7 @@
if (railVisible) { rail.stop(true,true).fadeIn('fast'); }
}
- var hideBar = function()
+ function hideBar()
{
// only hide when options allow it
if (!alwaysVisible)
View
14 slimScroll.min.js
@@ -2,12 +2,12 @@
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
- * Version: 0.4.4
+ * Version: 0.5.0
*
*/
-(function(d){jQuery.fn.extend({slimScroll:function(n){var a=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",resumePageScroll:!1},n);this.each(function(){var o,p,q,v,r,j,k=!1,n=parseInt(a.wheelStep),g=a.width,w=a.height,e=a.size,A=a.color,B=a.position,x=a.distance,s=
-a.start,C=a.opacity,l=a.alwaysVisible,y=a.railVisible,D=a.railColor,E=a.railOpacity,F=a.resumePageScroll,b=d(this),G=d("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:g,height:w});b.css({overflow:"hidden",width:g,height:w});var h=d("<div></div>").addClass(a.railClass).css({width:e,height:"100%",position:"absolute",top:0,display:l&&y?"block":"none","border-radius":e,background:D,opacity:E,zIndex:90}),c=d("<div></div>").addClass(a.barClass).css({background:A,
-width:e,position:"absolute",top:0,opacity:C,display:l?"block":"none","border-radius":e,BorderRadius:e,MozBorderRadius:e,WebkitBorderRadius:e,zIndex:99}),g="right"==B?{right:x}:{left:x};h.css(g);c.css(g);b.wrap(G);b.parent().append(c);b.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){q=!0},stop:function(){q=!1;i()},drag:function(){m(0,d(this).position().top,!1)}});h.hover(function(){t()},function(){i()});c.hover(function(){p=!0},function(){p=!1});b.hover(function(){o=
-!0;t();i()},function(){o=!1;i()});var u=function(a){if(o){var a=a||window.event,b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);m(b,!0);a.preventDefault&&!k&&a.preventDefault();if(!k)a.returnValue=!1}},m=function(a,d,e){var f=a;d&&(f=parseInt(c.css("top"))+a*n/100*c.outerHeight(),d=b.outerHeight()-c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));j=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=j*(b[0].scrollHeight-b.outerHeight());e&&(f=a,a=f/b[0].scrollHeight*
-b.outerHeight(),c.css({top:a+"px"}));b.scrollTop(f);t();i()};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",u,!1),this.addEventListener("mousewheel",u,!1)):document.attachEvent("onmousewheel",u)})();var z=function(){r=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:r+"px"})};z();var t=function(){z();clearTimeout(v);k=F&&j==~~j;r>=b.outerHeight()?k=!0:(c.fadeIn("fast"),y&&h.fadeIn("fast"))},i=function(){l||(v=setTimeout(function(){!p&&!q&&(c.fadeOut("slow"),
-h.fadeOut("slow"))},1E3))};"bottom"==s?(c.css({top:b.outerHeight()-c.outerHeight()}),m(0,!0)):"object"==typeof s&&(m(d(s).position().top,null,!0),l||c.hide())});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
+(function(d){jQuery.fn.extend({slimScroll:function(o){var a=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0},o);this.each(function(){function h(a,d,e){var f=a;d&&(f=parseInt(c.css("top"))+a*B/100*c.outerHeight(),d=b.outerHeight()-c.outerHeight(),
+f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));k=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=k*(b[0].scrollHeight-b.outerHeight());e&&(f=a,a=f/b[0].scrollHeight*b.outerHeight(),c.css({top:a+"px"}));b.scrollTop(f);p();i()}function w(){q=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),o);c.css({height:q+"px"})}function p(){w();clearTimeout(x);l=C&&k==~~k;q>=b.outerHeight()?l=!0:(c.stop(!0,!0).fadeIn("fast"),y&&g.stop(!0,!0).fadeIn("fast"))}function i(){m||(x=setTimeout(function(){!r&&
+!s&&(c.fadeOut("slow"),g.fadeOut("slow"))},1E3))}var t,r,s,x,q,k,o=30,l=!1,B=parseInt(a.wheelStep),j=a.width,z=a.height,e=a.size,D=a.color,E=a.position,A=a.distance,u=a.start,F=a.opacity,m=a.alwaysVisible,y=a.railVisible,G=a.railColor,H=a.railOpacity,C=a.allowPageScroll,n=a.scroll,b=d(this);if(b.parent().hasClass("slimScrollDiv"))n&&(c=b.parent().find(".slimScrollBar"),g=b.parent().find(".slimScrollRail"),h(b.scrollTop()+parseInt(n),!1,!0));else{n=d("<div></div>").addClass(a.wrapperClass).css({position:"relative",
+overflow:"hidden",width:j,height:z});b.css({overflow:"hidden",width:j,height:z});var g=d("<div></div>").addClass(a.railClass).css({width:e,height:"100%",position:"absolute",top:0,display:m&&y?"block":"none","border-radius":e,background:G,opacity:H,zIndex:90}),c=d("<div></div>").addClass(a.barClass).css({background:D,width:e,position:"absolute",top:0,opacity:F,display:m?"block":"none","border-radius":e,BorderRadius:e,MozBorderRadius:e,WebkitBorderRadius:e,zIndex:99}),j="right"==E?{right:A}:{left:A};
+g.css(j);c.css(j);b.wrap(n);b.parent().append(c);b.parent().append(g);c.draggable({axis:"y",containment:"parent",start:function(){s=!0},stop:function(){s=!1;i()},drag:function(){h(0,d(this).position().top,!1)}});g.hover(function(){p()},function(){i()});c.hover(function(){r=!0},function(){r=!1});b.hover(function(){t=!0;p();i()},function(){t=!1;i()});var v=function(a){if(t){var a=a||window.event,b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);h(b,!0);a.preventDefault&&!l&&a.preventDefault();
+l||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();w();"bottom"==u?(c.css({top:b.outerHeight()-c.outerHeight()}),h(0,!0)):"object"==typeof u&&(h(d(u).position().top,null,!0),m||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);

1 comment on commit 162089f

@denoww
denoww commented on 162089f Apr 16, 2012

Can i scroll to children element instead a pixel value?

myscroll.slimScroll({scroll: jqueryElement})

it's possible?

Please sign in to comment.
Something went wrong with that request. Please try again.