Simon Battersby

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.mousewheel.min.3.0.6.js"></script>
<link rel="stylesheet" href="/css/jquery.sbscroller.css" />

<script type="text/javascript">
$('#myelement').sbscroller();
</script>

$('#myelement').sbscroller({
				handleImage:'/images/misc/scrollbar-handle-middle.png',
				handleTopImage:'/images/misc/scrollbar-handle-top.png',
				handleBottomImage:'/images/misc/scrollbar-handle-bottom.png',
				handleGripImage:'/images/misc/scrollbar-handle-grip.png',
				autohide:true
});

$('#myelement').sbscroller('refresh');

26 responses to “Vertical scrollbar plugin using jQuery UI slider”

1. jeroen says:

   December 5, 2011 at 9:19 pm

   hello,

   I want to use your jquery plugin to customize the scroll-bars of a div. but I can’t get it to work. What do I surely have to put in the css code of my div ‘updates’ where I want scroll bars??

   Thanks
2. Simon says:

   December 6, 2011 at 5:27 pm

   Jeroen

   Not sure if that is a real email address otherwise I would have sent you a mail. You shouldn’t need to add any css other than the file that comes with the plugin.
   If it’s still not working can you send me a link, because otherwise I’m only guessing….
3. Wu Chia Chong says:

   December 19, 2011 at 7:59 am

   What should I write in my HTML, and what kind of ID should I use to the HTML element in order to use this plugin?
4. Simon says:

   December 19, 2011 at 9:04 am

   Your html can be pretty much anything you want – your container element (normally a div) needs to have a fixed height, and the content that you want to scroll obviously needs to be within that html element. It doesn’t matter what id or class you apply to your chosen element – you can use that to identify the element and apply the . sbscroller method in the same way as any other jQuery method.
5. dimitris says:

   December 19, 2011 at 4:32 pm

   i was seriously going nuts trying to make this work (ui slider as vertical scrollbar), nice work, thanks…
   it even fits my need to scroll a previously hidden element:)

   one suggestion… you could tweak so you don’t need a mousewheel option very easily, just replace
   if(settings.mousewheel){
   with
   if($.fn.mousewheel){
   and when mousewheel is available it is “auto-detected”
6. Marci says:

   December 19, 2011 at 8:08 pm

   The mouse scrolling speed is dependant on the content. So if there is a lot of content the scrolling is incredibly fast, and if the content is just a little bigger than the container than the scrolling is very slow.

   Can you help me find a way to make the mouse scrolling speed constant (independent of the content length)?
7. Simon says:

   January 9, 2012 at 10:26 am

   This amendment is included in V1.2.
8. MarkS says:

   January 10, 2012 at 3:10 pm

   How can I position the scrollbar at the bottom after a ‘refresh’?
9. Simon says:

   January 10, 2012 at 6:23 pm

   You could do this by using .find('.slider-vertical').slider("value", 0); on the scrolled element.
10. JustPie says:

    January 12, 2012 at 12:44 am

    I noticed that the scrollbar doesn’t resize correctly if you resize the parent element. This can be fixed by removing moving line 67: ” $scrollpane.find(‘.slider-wrap’).height(Math.round($scrollpane.height())); ” outside of the scope of the if statment that its currently in.

    Hope this helps someone out.
11. Simon says:

    January 17, 2012 at 11:50 am

    Thanks for pointing this out. I have amended the plugin to cope with this – version 1.4.
12. John says:

    January 30, 2012 at 6:55 am

    I am wondering if this plugin has support for touch devices ?
13. Simon says:

    January 30, 2012 at 10:30 am

    I haven’t tested it myself on a mobile device. The issue is really whether jQuery UI works consistently on mobile devices – I suspect the answer is no at present.
14. marc fawzi says:

    February 1, 2012 at 8:09 pm

    hey there!

    I bet you use Chrome to test because it works well on Chrome.

    But on Firefox 10.0 (and previous versions), when you do a fast scroll-up on the touchpad (Macbook) when the scrollbar is at the top-most position then you should see some very crazy jittering… Normally. jQuery slider doesn’t work with mousewheel events so I assume you added that and so the bug is either in the mousewheel plugin or your code, but I’d think in the former.

    Try it out yourself and see..

    Marc
15. Simon says:

    February 2, 2012 at 8:31 am

    Marc

    I tested on FF, Chrome, Opera, Safari and IE6+, as it says on the plugin page. I don’t see the behaviour you describe on FF10 on W7, so it may be restricted to Mac.
16. Smartboy says:

    February 3, 2012 at 5:49 pm

    @John:
    Jquery-ui doesn’t support touch devices as of the latest version, but there are libraries out there such as jquery.ui.touch-punch.js which add the compatibility into jquery-ui. However, I think it’d be better to use Jquery Mobile since that seems to be what is better supported on touch-capable devices.
17. MOCK says:

    February 23, 2012 at 11:55 am

    If you have a trouble with mousewheel event (jQuery 1.7.+), you can fix it. Just replace:
    if ( event.detail ) { delta = -event.detail/3; }

    to

    if ( event.originalEvent.detail ) { delta = -event.originalEvent.detail/3; }
18. Simon says:

    February 28, 2012 at 11:33 am

    I don’t see a problem with the mousewheel myself.
19. JeBuS says:

    March 20, 2012 at 8:22 pm

    Is it possible to get your plugin to use the jQuery UI theme? It would be nice if your scrollbar looked like the ui-slider.
20. Simon says:

    March 21, 2012 at 2:44 pm

    I’ll have a look at this sometime in the next week or so.

    I’ve had a quick look at this. There are two major issues with using the jQuery UI css. First, the images that jQuery UI css uses for the slider handle background are designed for a horizontal slider, not a vertical one, so they don’t work well. Secondly, jQuery UI css applies images to the background of the .ui-slider element, which does not extend to the top and bottom of my scrollbar (instead you would need to style its parent element .slider-wrap.

    Major changes would be required to resolve these, which frankly don’t seem worthwhile to me. It’s simple enough to amend your css to replicate the style of the jQuery UI css.

    Related to this, if the jQuery UI css is used on the same page as sbscroller.css then there is some interference. The following amendments to sbscroller.css should overcome this:

    .scroll-content {position:absolute;top:0;left:0;padding-right:20px}
    .scroll-pane{position:relative;}
    .slider-wrap{position:absolute;right:0;top:0;background-color:lightgrey;width:20px;}
    .slider-vertical{position:relative;height:100%;background:none !important;border:none !important}
    .ui-slider-handle{background-color:darkgray;width:20px !important;height:10px;margin:0 auto;display:block;position:absolute;border:none !important;left:0 !important}
    .ui-slider-handle img{border:none}
    .scrollbar-top{position:absolute;top:0;}
    .scrollbar-bottom{position:absolute;bottom:0;}
    .scrollbar-grip{position:absolute;top:50%;}
21. Ann says:

    March 23, 2012 at 7:29 pm

    Hi Simon,

    Love your script it was so easy to plugin! One question: Is there a way to change the height of the scrollbar so that it is shorter than the element that is being scrolled?

    Thanks,
    Ann
22. Ann says:

    March 24, 2012 at 1:17 am

    Hi Simon,

    Got the scroller to fit where I wanted it to! Thanks so much, I donated a couple of drinks for you!

    Cheers,
    Ann
23. JustPie says:

    April 5, 2012 at 12:42 am

    I have made a few improvements / bug fixes to the plugin. I commented all changes.

    http://pastebin.com/yhEYQDk8
24. Simon says:

    April 8, 2012 at 8:37 am

    JustPie

    Thanks for your interest (again). Re the mousewheel issues if the slider is refreshed, I’ve already fixed this in version 1.2 by simply removing the mousewheel and re-instantiating it. Moving the mousewheel code outside setSlider() will work, but the mousewheel scrolling will not change to reflect any change in height of the scroll pane.
25. Julian Josephs says:

    April 10, 2012 at 3:43 am

    How do I make the content in the plugin autoscroll on page load and reset to the first element when I reach the last.
26. Simon says:

    April 10, 2012 at 8:56 am

    Julian

    The plugin doesn’t support autoscroll – but if you have a look here I have a non-plugin version that might do what you want.
    View the source to see how it’s done.

Simon Battersby 2012