Simon Battersby

#scroll-pane,.scroll-pane{position:relative}
.scroll-content {position:absolute;top:0;left:0}
.slider-wrap{position:absolute;right:0;top:0;background-color:lightgrey;width:20px;border-left:1px solid gray;}
.slider-vertical{position:relative;height:100%}
.ui-slider-handle{width:20px;height:10px;margin:0 auto;background-color:darkgray;display:block;position:absolute}
.ui-slider-handle img{border:none}
.scrollbar-top{position:absolute;top:0;}
.scrollbar-bottom{position:absolute;bottom:0;}
.scrollbar-grip{position:absolute;top:50%;margin-top:-6px;}
.ui-slider-range{position:absolute;width:100%;background-color:lightgrey}

function setSlider($scrollpane){//$scrollpane is the div to be scrolled
	
	//set options for handle image - amend this to true or false as required
	var handleImage = false;
	
	//change the main div to overflow-hidden as we can use the slider now
	$scrollpane.css('overflow','hidden');
	
	//if it's not already there, wrap an extra div around the scrollpane so we can use the mousewheel later
	if ($scrollpane.parent('.scroll-container').length==0) $scrollpane.wrap('<\div class="scroll-container"> /');
	//and again, if it's not there, wrap a div around the contents of the scrollpane to allow the scrolling
	if ($scrollpane.find('.scroll-content').length==0) $scrollpane.children().wrapAll('<\div class="scroll-content"> /');
	
	//compare the height of the scroll content to the scroll pane to see if we need a scrollbar
	var difference = $scrollpane.find('.scroll-content').height()-$scrollpane.height();//eg it's 200px longer 
	$scrollpane.data('difference',difference); 
	
	if(difference<=0 && $scrollpane.find('.slider-wrap').length>0)//scrollbar exists but is no longer required
	{
		$scrollpane.find('.slider-wrap').remove();//remove the scrollbar
		$scrollpane.find('.scroll-content').css({top:0});//and reset the top position
	}
	
	if(difference>0)//if the scrollbar is needed, set it up...
	{
		var proportion = difference / $scrollpane.find('.scroll-content').height();//eg 200px/500px
		
		var handleHeight = Math.round((1-proportion)*$scrollpane.height());//set the proportional height - round it to make sure everything adds up correctly later on
		handleHeight -= handleHeight%2; 
		
		//if the slider has already been set up and this function is called again, we may need to set the position of the slider handle
		var contentposition = $scrollpane.find('.scroll-content').position();	
		var sliderInitial = 100*(1-Math.abs(contentposition.top)/difference);
		
		if($scrollpane.find('.slider-wrap').length==0)//if the slider-wrap doesn't exist, insert it and set the initial value
		{
			$scrollpane.append('<\div class="slider-wrap"><\div class="slider-vertical"><\/div><\/div>');//append the necessary divs so they're only there if needed
                        sliderInitial = 100;
		}
		
		$scrollpane.find('.slider-wrap').height($scrollpane.height());//set the height of the slider bar to that of the scroll pane
		
		//set up the slider 
		$scrollpane.find('.slider-vertical').slider({
			orientation: 'vertical',
			min: 0,
			max: 100,
			range:'min',
			value: sliderInitial,
			slide: function(event, ui) {
				var topValue = -((100-ui.value)*difference/100);
				$scrollpane.find('.scroll-content').css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height
				$('ui-slider-range').height(ui.value+'%');//set the height of the range element
			},
			change: function(event, ui) {
				var topValue = -((100-ui.value)*($scrollpane.find('.scroll-content').height()-$scrollpane.height())/100);//recalculate the difference on change
				$scrollpane.find('.scroll-content').css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height
				$('ui-slider-range').height(ui.value+'%');
		  }	  
		});
		
		//set the handle height and bottom margin so the middle of the handle is in line with the slider
		$scrollpane.find(".ui-slider-handle").css({height:handleHeight,'margin-bottom':-0.5*handleHeight});
		var origSliderHeight = $scrollpane.height();//read the original slider height
		var sliderHeight = origSliderHeight - handleHeight ;//the height through which the handle can move needs to be the original height minus the handle height
		var sliderMargin =  (origSliderHeight - sliderHeight)*0.5;//so the slider needs to have both top and bottom margins equal to half the difference
		$scrollpane.find(".ui-slider").css({height:sliderHeight,'margin-top':sliderMargin});//set the slider height and margins
		$scrollpane.find(".ui-slider-range").css({bottom:-sliderMargin});//position the slider-range div at the top of the slider container
		
		//if required create elements to hold the images for the scrollbar handle
		if (handleImage){
			$(".ui-slider-handle").append('');
			$(".ui-slider-handle").append('');
			$(".ui-slider-handle").append('');
		}
	}//end if
		 
	//code for clicks on the scrollbar outside the slider
	$(".ui-slider").click(function(event){//stop any clicks on the slider propagating through to the code below
		event.stopPropagation();
	});
	   
	$(".slider-wrap").click(function(event){//clicks on the wrap outside the slider range
		var offsetTop = $(this).offset().top;//read the offset of the scroll pane
		var clickValue = (event.pageY-offsetTop)*100/$(this).height();//find the click point, subtract the offset, and calculate percentage of the slider clicked
		$(this).find(".slider-vertical").slider("value", 100-clickValue);//set the new value of the slider
	}); 
	
		 
	//additional code for mousewheel
	if($.fn.mousewheel){		
	
		$scrollpane.parent().unmousewheel();//remove any previously attached mousewheel events
		$scrollpane.parent().mousewheel(function(event, delta){
			
			var speed = Math.round(5000/$scrollpane.data('difference'));
			if (speed <1) speed = 1;
			if (speed >100) speed = 100;
	
			var sliderVal = $(this).find(".slider-vertical").slider("value");//read current value of the slider
			
			sliderVal += (delta*speed);//increment the current value
	 
			$(this).find(".slider-vertical").slider("value", sliderVal);//and set the new value of the slider
			
			event.preventDefault();//stop any default behaviour
		});
		
	}
	
}

setSlider($('#myElement'));

$('.myElementClass').each(function(){
	setSlider($(this));
});

setSlider($('#myElement'));

function changeContent{//do whatever you want....
...code to change content....
setSlider($('#myElement'));//call the function again to reset the slider for the new content
}

setSlider($('#myElement'));

$(window).resize(function() {
	setSlider($('#myElement'));
});

$('#myElement').show();//or whatever you want, then...
setSlider($('#myElement'));//...call the function again to reset the slider for the new content
}
});

setSlider($('#myElement'));

//code to set an initial scrolled position
var position = $("#targetElement").position();//find the position of the required item
var topValue = position.top;//extract the top value
var sliderValue = 100-(100*topValue/($(".scroll-content").height()-$("#scroll-pane").height()));//calculate the percentage of the top of the required item
$(".slider-vertical").slider("value", sliderValue);//and set the new value of the slider

setSlider($('#myElement'));
//autocomplete
var difference = $(".scroll-content").height()-$("myElement").height(); 
$("#quickfind").autocomplete({
	source: "get_descriptions.php",
	minLength: 2,//search after two characters
	select: function(event,ui){
		position = $(".scroll-content-item:contains("+ui.item.value+")").position();//search for a div containing the selected description and read its position
		
		var topValue = -(position.top);//content top is just the negative of the top position
		
		if (topValue>0) topValue = 0;//stop the content scrolling down too much
		if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much
	
		sliderVal = (100+(topValue*100/difference));//calculate the slider position from the content position
		$(".slider-vertical").slider("value", sliderVal);//set the slider position
		}
});

setSlider($('#myElement'));

var scrollId = setInterval('scrollDown()', 60);// start the autoscroll via a function

$(".ui-slider-handle").mouseover(function(){//stop the autoscroll if the handle is hovered
    clearInterval(scrollId);
});

function scrollDown(){
	if ($(".slider-vertical").slider("value")>0){//if it's not at the bottom, scroll down
		$(".slider-vertical").slider("value",$(".slider-vertical").slider("value")-1);
	}
}

setSlider($('#myElement'));

$('#arrow_up').mousedown(function(event) {
	if(event.preventDefault) event.preventDefault();
    intervalId = setInterval('scrollUp()', 30);
	$(this).bind('mouseup mouseleave', function() {
		clearInterval(intervalId);
	});
});
$('#arrow_down').mousedown(function(event) {
	if(event.preventDefault) event.preventDefault();
    intervalId = setInterval('scrollDown()', 30);
	$(this).bind('mouseup mouseleave', function() {
		clearInterval(intervalId);
	});
});

function scrollUp(){
	if ($(".slider-vertical").slider("value")<100){//if it's not at the top, scroll up
		$(".slider-vertical").slider("value",$(".slider-vertical").slider("value")+1);
	}
}
function scrollDown(){
	if ($(".slider-vertical").slider("value")>0){//if it's not at the bottom, scroll down
		$(".slider-vertical").slider("value",$(".slider-vertical").slider("value")-1);
	}
}

setSlider($('#scroll-pane'));

$('#anchors a').click(function(){

	var difference = $('.scroll-content').height()-$('#scroll-pane').height();//calculate the difference - not needed if within the main slider code
	
	var targetclass = ($(this).attr('class'));//read the class of the clicked anchor
    
	var position = $(".scroll-content ."+targetclass).position();//search for a div with matching class and read its position
    var topValue = -(position.top);//content top is just the negative of the top position
		
	if (topValue>0) topValue = 0;//stop the content scrolling down too much
	if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much

	sliderVal = (100+(topValue*100/difference));//calculate the slider position from the content position
	$(".slider-vertical").slider("value", sliderVal);//set the slider position
	
	return false;
});

   //set up the slider 
   $scrollpane.find('.slider-vertical').slider({
      orientation: 'vertical',
      min: 0,
      max: 100,
	  range:'min',
      value: sliderInitial,
      change: function(event, ui) {
			 var topValue = -((100-ui.value)*difference/100);
			 $scrollpane.find('.scroll-content').[highlight]animate({top:topValue},animateSpeed,easingMethod[/highlight]);//move the top up (negative value) by the percentage the slider has been moved times the difference in height
			 $('ui-slider-range').height(ui.value+'%');
	  }	  
   });

setSlider($('#myElement'));
$('.item').draggable({appendTo:'body',helper:'clone'});
$('#droppable').droppable({
	drop:function(event,ui){
		$( this ).find( "#placeholder" ).remove();
		var description = ui.draggable.find('p').text();
		$( "<\li><\/li>" ).text(description).appendTo( $('#droppable ul') );
	}
});

setSlider($('#myElement'));
$(".slider-wrap").hide();
$("#myElement").hover(function(){
	$(".slider-wrap").show();
	},
	function(){
	$(".slider-wrap").hide();
});

setSlider($('#myElement'));

function setSlider($scrollpane){//$scrollpane is the div to be scrolled
	
	//set options for handle image - amend this to true or false as required
	var handleImage = [highlight]true[/highlight];
         
        ...

	if (handleImage){//change the image paths as required for your images - delete any that are not required if you want
		$(".ui-slider-handle").append('');			
                $(".ui-slider-handle").append('');
		$(".ui-slider-handle").append('');
	}

        ...

.ui-slider-handle{background:transparent url(/images/misc/scrollbar-handle-middle.png) repeat-y top left;}

.slider-wrap{background-color:#EA9531;}

.ui-slider-range{position:absolute;width:100%}

//position the slider range div at the top of the slider wrap - this ensures clicks above the area through which the handle moves are OK
$(".ui-slider-range").css({top:-sliderMargin});

//add a click function to ensure clicks below the area through which the handle moves are OK
$("#slider-wrap").click(function(){//this means the bottom of the slider beyond the slider range is clicked, so move the slider right down
   $("#slider-vertical").slider("value", 0);
   $('#scroll-content').css({top:-difference});   
})

$("document").mousewheel(function(event, delta){

     var speed = 5;//set the speed of the scroll
     var sliderVal = $("#slider-vertical").slider("value");//read current value of the slider
		
     sliderVal += (delta*speed);//increment the current value
 
     $("#slider-vertical").slider("value", sliderVal);//and set the new value of the slider
		
     var topValue = -((100-sliderVal)*difference/100);//calculate the content top from the slider position
		
     if (topValue>0) topValue = 0;//stop the content scrolling down too much
     if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much
		
     $("#scroll-content").css({top:topValue});//move the content to the new position

     event.preventDefault();//stop any default behaviour

});

$("#scroll-pane,#slider-wrap").mousewheel(function(event, delta){...etc

162 responses to “Vertical scrollbar using jQuery UI slider”

1. henning fischer says:

   November 24, 2013 at 12:57 pm

   one word: awesome. tested so many scrollbar scripts and this is so simple and powerfull! thx a lot.

2. Simon says:

   November 18, 2013 at 7:33 am

   Yes, you could do this. Making the slider horizontal is just a simple change in the settings, and then you’d need to amend the javascript that scrolls the div to scroll the whole page instead. .scrollTop() might help you here. I think you’d want the slider to be position:fixed, not absolute, so it doesn’t scroll.

3. Champo says:

   November 17, 2013 at 5:27 pm

   Hi Simon,

   Thank you very much for this.

   Is it possible to have the scrollbar to be horizontal and as a seperate div (ideally position:absolute; bottom: 20px;) ?

   I need to control the vertical scroll of the entire page (height: 5000px). By scrolling down the page i activate a background png sequence. I want to control this with the horizontal slider/scrollbar.

   I don’t know if i am clear enough. In simple i want a slider that when clicked left to right, makes you go from page top to page bottom.

   Thank you

   Eliott

4. Simon says:

   July 19, 2013 at 12:39 pm

   You’d need to call setSlider() again after adding the content.

5. Madhu Sudan .K says:

   July 19, 2013 at 12:35 pm

   Hi Simon,
   Really wonderful work, demos and examples. Thank you so much.
   I have a small query – if I add some content through Firefox console(edit) then the content is not shown by the div with the vertical scroll.
   Is it possible to make div know the content height when the content was given from a browser.
   The default scroller adjusts itself when it is done from Firefox page.
   Thanks & Regards,
   Madhu

6. Simon says:

   July 11, 2013 at 1:32 pm

   It does support this – have a look at this example.

7. Dnyaneshwar says:

   July 11, 2013 at 12:53 pm

   Hi
   Nice Plugin but it doesn’t work for hidden element.
   eg. if that div is onload hidden and after click that div is display block in this scenario it doesn’t work. Please provide us some solution.

8. Simon says:

   June 3, 2013 at 8:11 am

   Ruhollah

   This page works fine. I can’t think that the charset will affect anything in this code. What is it that doesn’t work?

9. ruhollah says:

   June 3, 2013 at 2:03 am

   Hi
   It does not support complex characters like ش س ب (persian and arabic characters)

10. Simon says:

    April 25, 2013 at 8:31 am

    Hannah
    That’s not too difficult, but the script would need some amendment as currently it will just slide content in its ‘own’ container.
    Have a look at this.
    You would of course need to ensure that the scrolling content is the same height in each box.

11. Hannah Carroll says:

    April 24, 2013 at 11:37 pm

    So here is what I am trying to make work…I have three divs all floated against each other. I want the middle div to contain the slider and to correspond and slide the content in the 2 outer divs surroundings this. I’ve gone is circles. Is this possible with the way you have written this script?

12. Simon says:

    March 31, 2013 at 7:45 am

    That’s coming from the jQuery UI css, not my css. You’ll need to make some additions to your css to negate the jQuery if you don’t want them.
    Have a look at the section on the plugin page for some help.

13. Marque says:

    March 31, 2013 at 5:38 am

    Disregard last post…I had my width to wide for the offset but now I see something I didn’t notice before. The bar itself gets a black bar in the slide area when I slide down a little.

14. Michele says:

    March 25, 2013 at 4:50 pm

    Thank you! I was indeed using an older version of UI. It works like a charm now, silly me!

15. Simon says:

    March 25, 2013 at 4:39 pm

    Michele

    I’m guessing that you might be using an older version of jQuery UI with jQuery 1.9? It works fine (just tested!) with jQuery 1.9.1 and jQuery UI 1.10.2.

16. Michele says:

    March 25, 2013 at 4:33 pm

    Great script! I just can’t seem to be able to make it work with jQuery 1.9.1… Do you have any suggestion? Other than switch back to 1.7.1! 😉

17. Alain says:

    February 6, 2013 at 4:05 pm

    Simon
    And it works ! Simple and clean ! Thank you very much.! I go on exploring this clever script to see how I can manage it into my webdesign and concept. I will give you a feedback about that !

18. Simon says:

    February 6, 2013 at 1:52 pm

    Alain

    You’re missing a height on #global. Add height:100% to this element and then the ‘Not_OK_test…’ file works.

19. Alain says:

    February 6, 2013 at 1:41 pm

    Simon
    Thanks for you answer ! I suspect something wrong about CSS too. You can find here a very simple example. If you have a more precise suggestion about what’s wrong ?
    http://www.memoiredimages.fr/docs/Vertical_Scrollbar_Inside_A_Super_Container.zip

20. Simon says:

    February 6, 2013 at 10:24 am

    Alain
    That sounds like you just don’t have the css right. To resize the window the #scroll-pane needs to be set with a percentage height and up the DOM structure so that the height changes with the window. It’s hard to suggest anything else without seeing your site, really.

21. Alain says:

    February 5, 2013 at 6:06 pm

    Simon,

    Thanks for this very interesting summary with a lot of examples ! Regarding Scrollbar resizes with window, I have noticed that it seems not working when the div container #scroll-pane is nested inside another div for example #global. I have some partial result by changing the css this way :
    #global #scroll-pane,.scroll-pane{position:relative}. Nevertheless, the Scrollbar cannot resize with window. Any suggestion for this problem ?

22. Simon says:

    January 13, 2013 at 8:14 am

    Walter
    Have a look at the demo pages, and view the page source (Ctrl+U in everything except Internet Explorer, where it’s Page > View Source). This shows the entire page. If you’re still stuck, get back in touch.

23. Walter Wilson says:

    January 12, 2013 at 8:22 pm

    Looks interesting, and the examples work really well. Alas, the bits of code on offer don’t seem sufficiently complete to adapt to one’s own site – whatever one tries there seems to be something missing.

24. Simon says:

    November 7, 2012 at 9:14 am

    Heiko

    I haven’t tested on Android, no. The base issue is that jQuery UI doesn’t currently recognise touch events, I think. I’ve very recently tried using jQuery UI Touch Punch, which works on a quick test on Apple iOS on an iPad. I’d suggest adding this to your page. It works on this test page.

25. Heiko says:

    November 5, 2012 at 3:00 pm

    Hi,

    great script so far….
    Have u already tested in Android 4.2 (Jelly Bean) with newest Chrome Browser? I dont think that this is the right behaviour…you cant scroll the div anymore by “touching” the content – you have to exactly match the scrollbar. The behaviour of the bar is “Hyperlink-Like”. You ever have to make a click in the wrapper of the scrollbar to scroll – that is not useable… Any suggestions for this problem?

26. Simon says:

    October 2, 2012 at 7:32 am

    Pawel

    You’ll need UI Core and UI Slider.

27. Pawel says:

    October 2, 2012 at 12:33 am

    Hi, I would like to build a custom download of the jQuery UI. What jQuery UI components are required to make this slider work?

    Thank you

28. Simon says:

    September 17, 2012 at 7:35 am

    Hi Huppy

    If you want to use two scrollbars with different images for the handle then there’s two choices:

    – use two different versions of the setSlider() code which apply different images, and call them separately for each scrolled element, or
    – use the plugin version of this code, which supports different images anyway

29. Huppy says:

    September 17, 2012 at 6:28 am

    Hey Simon, I was wondering how to have multiple scrollbars that have different styles for each one.
    I’m trying to apply a different scrollbar for the text area I have here: http://www.huppycollective.com/

    Thank you!

30. Juergen says:

    August 15, 2012 at 12:58 pm

    GREAT
    That was VERY usefull.
    I tried the first 9 hints from http://www.net-kit.com/jquery-custom-scrollbar-plugins/
    But yours coming 10th was the only one working for me

31. NageswaraRao says:

    July 28, 2012 at 3:28 pm

    Thanks a lot for providing a dynamic solution for multiple problems of Jquery-Div Scrolling.

32. Simon says:

    July 17, 2012 at 3:39 pm

    Hi Liz

    Start with the multiple slider approach, and then just adapt the additional code for the buttons using a class instead of an id for the buttons. You’ll then need to amend the scrollUp() and scrollDown() functions so they only scroll the relevant slider. I’d do this by adding the scrolling element as an argument to the function and calling this from the bound click event. Hope that helps.

33. Liz says:

    July 17, 2012 at 3:31 pm

    Hi Simon,
    I see you have examples for the multiple sliders and the slider scrolling via buttons, what would be the best way to have on one page both multiple sliders each with their own buttons, without having all of the sliders scroll at once?

34. James says:

    July 2, 2012 at 6:22 pm

    This is beautiful, I’ve just emailed 5 examples to myself which I’ve identified as necessary to replace my cludged jquery-1.4 scrollbars. Been looking for a way to replace them so I can update to jquery-1.7 and this fits the bill, I think. Thank you, Simon.

35. Simon says:

    May 17, 2012 at 4:59 pm

    Hi Jai

    Horizontal sliders are quite different to vertical sliders, so if you want a horizontal the best starting point is this example on the jQuery UI site. You should be able to adapt that code to animate margin-top instead of margin-left to achieve the effect you want.

36. Jai says:

    May 17, 2012 at 1:55 pm

    Wow, Its very useful for me. Thanks a lot. Can I ask one simple question? Is it possible to make the slider (only the slider not scroll content) horizontal? Which means when move the scroll bar horizontally the content area need to move vertically (Same happening now). Sorry for my bad English.

37. Tony says:

    May 9, 2012 at 5:11 am

    yeah i scoped out touch punch, but i liked scrollability (does the same thing but much lighter weight). the only issue is that both of those scripts conflict with your scrollbar; they scroll the content on touchdown, but the scrollbar doesn’t change with the scroll, so it just resets to top 0 on touch up. its rather frustrating being so close to perfection and yet so far.

38. Simon says:

    May 8, 2012 at 8:21 am

    Hi Tony

    I don’t have a complete answer to this (as I don’t have a touchpad device…) but: the first port of call ought to be jQuery Mobile, but the slider provided in jQuery mobile looks like it’s just a horizontal one, and further it seems jQuery UI and jQuery Mobile have some difficulty working together anyway. So, it doesn’t look like jQuery Mobile is much help at the moment. Looking at alternatives, this development looks like it might be worth a try.

39. Tony says:

    May 8, 2012 at 7:08 am

    Simon – love this script. Great work, truly. Answer to prayers.

    I am banging my head against a wall, though, trying to get it to work on touch devices (specifically tablets, like the ipad). Any ideas?

40. Simon says:

    April 23, 2012 at 12:15 pm

    Madhav

    Have a look at this implementation of the scrolbar which copes with the content being amended after load:

41. Madhav says:

    April 20, 2012 at 6:20 pm

    Vertical Scrollbar works fine if the content is hardcoded inside div id=”scroll-pane”. Scrollbar not appearing if the data is loaded dynamically inside scroll-pane div.

    Please help me.

42. Richard says:

    April 13, 2012 at 3:05 pm

    Great adaptation of the jquery ui. I found I needed a vertical scroller this morning and your adaptation does almost exactly what I needed. I did need to restyle the handle on focus though, so made a couple of changes to the code.
    I’ve put the example of the changes I made on my site: http://www.spainpropertyportal.com/vertical-scroll/
    Feel free to use it if you like it.

43. Simon says:

    April 8, 2012 at 8:29 am

    Avex

    If you view any of the demos you can see the html by viewing the source of the page.
    If you mean change the colour of the handle on hover this can be done just with css using the classes that jQuery UI itself adds. On the basic example, try adding the following to the css:

    a.ui-state-hover{background-color:orange}

44. Avex says:

    April 5, 2012 at 8:18 am

    Hi Simon, i don’t know how to add your good scroll to site. So can you show instructions and also examples of html code?
    P.S. Can your scroll change the color after mouse over? How to make this?

45. Simon says:

    April 4, 2012 at 8:22 am

    Hi xb

    The code can’t be styled directly using the jQuery UI css themes – the images supplied do not work well with a vertical, as opposed to horizontal slider, and my vertical scrollbar requires an additional enclosing element for the slider, with the result that the wrong element is styled. However, you can get fairly close: more information here.

46. xb says:

    April 3, 2012 at 6:13 pm

    Awesome plugin!
    Do you plan on adding in integration with the jquery UI themes? This is the only thing holding me back right now since the user can change themes I’d like to have the scroll bar change too.

47. Simon says:

    March 16, 2012 at 12:48 pm

    Well, I can’t change my css otherwise the slider won’t work….it doesn’t conflict with the jQuery UI base css. I suggest you examine what’s conflicting using a tool like Firebug and take it from there.

48. D3vilroot says:

    March 16, 2012 at 12:36 pm

    I mean that i’m using your css and also ui css.. i think they are in conflict

49. Simon says:

    March 16, 2012 at 12:01 pm

    I didn’t build this using the jQuery UI css, so it’s not suprising it doesn’t work, although you can certainly adapt the styling here to produce the same effect.

50. D3vilroot says:

    March 16, 2012 at 11:56 am

    I found problematic using your script with
    jquery-ui-1.8.16.custom.css
    when I import ‘ui css’ slider looks bad? Is there a solution to use core ui css and your slider as well?

51. Simon says:

    March 16, 2012 at 7:35 am

    Tian, this is what you need:

    $('.scroll-pane').each(function(){
        setSlider($(this));
    });
    $(".slider-wrap").hide();
    $(".scroll-pane").hover(function(){
        $(this).find(".slider-wrap").show();
        },
        function(){
        $(this).find(".slider-wrap").hide();
    });

    Because there are multiple elements with class slider-wrap they need to be qualified via $(this) for the hide and show.

52. Tian says:

    March 15, 2012 at 7:36 pm

    Hi Simon, fantastic script here, however, I am trying to use both the multiple and auto hide functions together and Im scruggling, this is what I am using:

    $('.scroll-pane').each(function(){
       setSlider($(this));
    });
    setSlider($('.scroll-pane'));
    $(".slider-wrap").hide();
    $(".scroll-pane").hover(function(){
       $(".slider-wrap").show();
    },
    function(){
       $(".slider-wrap").hide();
    });

53. Simon says:

    February 13, 2012 at 12:03 pm

    Hi Dick

    Thanks for that. As you’ve identified, it looks like the mousewheel plugin needed updating to work with jQuery 1.7.

54. m4t says:

    February 13, 2012 at 10:20 am

    Hi Simon, thanks for this simple but very useful code.

    I’m using your multiple scrollbar slider and this is my little contribution:

    if you add this after main if:

    else{ $(this).height($(this).find(‘.scroll-content’).height());}

    div height will change according to effective height. No more blank spaces between content.

    Hope it helps someone…
    byeee

55. Dick Kirkland says:

    February 9, 2012 at 5:20 pm

    Hey Simon! Thanks again for this great implementation. Recently, I upgraded to jQuery UI 1.8.17 from .13 and jQuery to 1.7.1 from 1.5.1. Since then everything works in the content slider except for the mousewheel.

    In order to use jQuery 1.7.1 and jQuery UI 1.8.17, I upgraded the mousewheel code from 3.0.2 to 3.0.6 which seems to fix the problem of the mousewheel not being able to “scroll” the content slider and its contents. The new mousewheel code (3.0.6) can be found here… https://github.com/brandonaaron/jquery-mousewheel/downloads.

56. kly411 says:

    January 30, 2012 at 9:22 pm

    Thanks to Simon, Mitch, Brent and all subsequent contributors. This is a major find in my book and pleasantly understandable!

57. Simon says:

    December 23, 2011 at 9:01 am

    Laura

    It’s easiest if you just view the source code on the demo page – Ctrl+U in everything except Internet Explorer where it’s Page > View Source.

58. Laura says:

    December 23, 2011 at 12:26 am

    can you please include the html in your example

59. Simon says:

    November 8, 2011 at 9:45 am

    Varun

    The starting point for this code was the horizontal scrollbar example on the jQuery UI site – you might want to take a look at that.

60. Varun says:

    November 8, 2011 at 7:48 am

    Just wondering what parameters need to be changed to make your code scroll horizontal.

61. Björn says:

    October 31, 2011 at 8:37 pm

    Thanks a million. Browsed through the web for easily implementable scrollbars, and tried several without success. Yours is working like a charm!

62. Simon says:

    October 28, 2011 at 4:53 pm

    I’ve added a fix to this problem to the demo.

63. Dick Kirkland says:

    October 27, 2011 at 9:05 pm

    Mr. Battersby,
    Thanks so much for this great resource. Related to the demo (w/buttons) at…
    http://www.simonbattersby.com/demos/vertical_scrollbar_demo_14_scroll_buttons.htm
    I see some weirdness occur when a user could possibly drag the button image(s) off of the click point. This seems to clog up the behavior of the scrollbar. Sometimes, the handle on the slider will vibrate like it’s confused. Again, this happens only when I drag the images off of the click destination/link area on the buttons. I’ve reproduced it in IE9 and FF 7.0.1. I really like this solution, but I’m hesitant to implement it because of the slight bug I’ve found. Do you have any ideas as to why this is happening? I’m wondering if I assign the click handlers to a container with a background image rather than just use the image themselves, if this will fix the issue. I really appreciate what you’ve done, just wondering if you’d noticed this or had any ideas. Thanks in advance for reviewing.

64. Mikhail says:

    October 19, 2011 at 11:27 am

    Thank you! very usefull!

65. Simon says:

    October 18, 2011 at 8:23 am

    Yes. For the basic slider, change this:

     $("#scroll-pane").after('<\div id="slider-wrap"><\div id="slider-vertical"><\/div><\/div>');

    to this:

     $("#scroll-pane").before('<\div id="slider-wrap"><\div id="slider-vertical"><\/div><\/div>');

    and then in the css move margin-left:50px from #scroll-pane to #slider-wrap.

66. Gerben says:

    October 17, 2011 at 11:03 pm

    Is it possible to place the scrollbar at the left side of the div?

67. Varun says:

    October 17, 2011 at 9:12 am

    Awesome. Thanks a million!

68. Simon says:

    October 17, 2011 at 7:41 am

    The anchors option uses the standard slider options to move – you could try using the animate option on UI Slider – which is what the easing demo uses.

69. Simon says:

    October 17, 2011 at 7:38 am

    Works fine here.

70. Varun says:

    October 17, 2011 at 7:32 am

    Is it possible to adjust scrolling speed using anchor variant?

71. Varun says:

    October 17, 2011 at 7:25 am

    Hi:

    I tried adding easying variant with anchors but no luck.

72. Simon says:

    October 12, 2011 at 9:29 am

    Cristian

    The problem is really that these two aren’t designed to work together – if you’re using a mousewheel you want lots of tiny movements to reflect the scroll – which don’t work well with easing.

73. Cristian Rusu says:

    October 12, 2011 at 7:12 am

    Hello

    the easying not really working smooth specially with mouse wheel and you have to let go the scrollbar to actually fire the scroll event

    Any thoughts?

    Cristian

74. Simon says:

    October 12, 2011 at 7:01 am

    Joe

    I think this would be rather odd for users – a scrollbar by definition has a stop at the top and a bottom and isn’t endless. What happens when you’ve scrolled to the bottom – does the scrollbar then jump back to the top? If so I’d suggest that is unexpected behaviour for the user.

    On a practical note, the endless slider works by cloning elements before and after the content to give the appearance of an endless scroll – which if combined with a scrollbar will mean the length of the scroll-content will extend – so that would be a challenge to overcome. Overall if you want the endless scrolling effect I would dispense with the scrollbar entirely, and just use .animate() triggered by up and down buttons. This would be both simpler to build and less confusing to the user.

75. Joe says:

    October 11, 2011 at 10:05 pm

    I would like to implement the example: autohide the scrollbar with endless/infinite scroller. any suggestions?
    Thanks in advance!

76. Simon says:

    October 11, 2011 at 8:36 am

    Hi Varun

    You could plug in the code from the easing variant, yes, but again, if you don’t need the scrollbar I’d just use .animate() to move your div.

77. Varun says:

    October 11, 2011 at 8:11 am

    thanks Simon for prompt reply. I changed overflow from “auto” to “hidden” in #scroll pane and in worked perfectly.

    However, I was thinking is it possible to use ‘adding easing’ effect with ‘scrolling with anchors’ technique.

78. Simon says:

    October 10, 2011 at 8:57 am

    Not very clear what you’re trying to do – if you don’t want the scroller to appear at all you could just hide it with css – but in this case I think it would be easier to dispense with the scrollbar altogether.

79. Varun says:

    October 10, 2011 at 7:10 am

    how can I remove scrollbar to appear while using anchors to scroll?

80. oleg says:

    September 26, 2011 at 8:32 pm

    thank you

81. Simon says:

    September 23, 2011 at 1:15 pm

    You need to make sure your vertical and horizontal scrollers are identified with separate ids or classes and that the slider is called and set up separately. If you do this there shouldn’t be a conflict.

82. mary says:

    September 23, 2011 at 9:13 am

    Hi,
    This article is really helpful. How can i add both horizontal and vertical slider in the same page.
    Am using http://jqueryui.com/demos/slider/#side-scroll for horizontal scroll, and ur code for vertical scroll bar. Can u please advice how to resolve the conflict when adding both horizontal and vertical slider in same page.Thanks in advance

83. TekProfessional says:

    September 18, 2011 at 5:52 pm

    I just have to say, I’m very impressed with the example code, and your responsiveness to the comments you’ve received from your readers.

    Its great to see when a developer not only posts an awesome solution, but also follows-up and addresses some of the challenges that readers have when implementing your code!

84. Chetaru says:

    September 15, 2011 at 11:46 am

    Hi..
    Thanks for sharing this information and resources it’s really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

85. Simon Suh says:

    September 8, 2011 at 7:32 am

    thanks for the blog post, i’m reading over your css so I can learn how to customize the appearnce of my own scrollbar based off the jquery UI. Keep up the good work!

86. Josh says:

    August 25, 2011 at 4:57 pm

    Simon, have you seen the new scrollbars used in safari? I modified the css slightly and was able to get this same feel using the auto hide solution. Now I just need to add fading animation to the hide. A good example would be the new scrollbar in Facebook for your online friends. Doesn’t show until you rollover, then fades in when rollover and fade out when rollout. Pretty spiffy!

87. Simon says:

    August 24, 2011 at 9:26 am

    Added as a variant: auto scroll on load Demo

88. Jenya says:

    August 24, 2011 at 1:52 am

    Hello,

    Is it possible to animate the scroll bar? I want it to start moving down automatically once the page is loaded. And stoped once i click on scroller.

    Thank you in advance!

89. Simon says:

    August 14, 2011 at 7:38 am

    The approach to take will be very similar to that I’ve employed for my multiple sliders. You would need to wrap all the code that sets the slider up (essentially everything that’s not already in a function) into a new function, and then call this function for each slider using .each() – making sure that. The code is already set up using classes so you shouldn’t need to change the html or css much, if at all.

    Jay – I replied by email to your subsequent comment but apparently your spam filter means I need to complete a form to allow me the privilege of sending you an email. Not welcoming when I’m trying to help you. Perhaps you can unspam and read it.

90. jay says:

    August 13, 2011 at 8:39 pm

    Simon,

    Thanks for the “multiple scrollbars on one page” demo. I was at the jQuery UI page, http://jqueryui.com/demos/slider/#side-scroll, and have been looking for horizontal multiple scrollbars for a long time until I found your page.

    I simply need to have multiple horizontal scrollbars on the page using exactly the jQuery UI css and js shown at above URL without having too much code modification. Can you shed some light?

    Thanks.

    Jay

91. Simon says:

    August 11, 2011 at 3:17 pm

    Vlad

    Yes – there’s an example under variants – here’s the demo. That uses multiple images in just the way you describe.

92. Vlad says:

    August 11, 2011 at 1:17 pm

    Hi. Is there a way to put an image for the scroll handler so that it streches only in the middle and has its top and bottom rounded, for example? Something like having 3 containers on top of eachother and only the middle one repeats the background.

93. Simon says:

    August 6, 2011 at 6:11 pm

    Dennis

    Yes – there’s an example under variants – here’s the demo.

94. dennis says:

    August 6, 2011 at 5:32 pm

    is it somehow possible to set the height of the scroll-pane to 100% so it changes size when resizing the browserwindow?

95. Simon says:

    August 3, 2011 at 9:48 am

    I’ve added example under variants – here’s the demo.

96. danny says:

    August 2, 2011 at 7:44 pm

    First, let me thank you for your code. Thanks to it’s discovery, a nervous breakdown was narrowly averted.

    Is there is a way to add arrow buttons at the bottom? Just as an additional option for the user. So they could control the scroll bar by actually clicking on it, using the mouse/track pad, or using the arrow buttons.

    Any ideas would be greatly appreciated…and the ones presented are already a life-saver!

97. Simon says:

    July 23, 2011 at 10:14 am

    Dave

    jQuery UI slider supports this via the ‘step’ option. To use this you need to add the parameter to the javascript:

    $('#slider-vertical').slider({
          orientation: 'vertical',
          step: 10,
          min: 0,
          max: 100,.....
          

98. Dave says:

    July 21, 2011 at 3:51 pm

    Really excellent code. Any easy way to make it scroll in increments?

99. Simon says:

    July 15, 2011 at 5:37 pm

    There’s an example for multiple scrollers on a page under the variants section. Demo here.

100. rajunix says:

     July 15, 2011 at 1:14 pm

     Thank u so much for using UI for scrollbar. But I am using multiple boxes using same code(divs, ids) but it not working. It is useful to work only one scrollbar in the whole page.. I need multiple….. thanku

101. Simon says:

     July 7, 2011 at 7:23 am

     Either from http://jqueryui.com/ or you can use a CDN like https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js.

102. Gavin says:

     July 7, 2011 at 2:04 am

     You are an absolute scholar and a gentleman! Thanks so much, not only for your prompt response, but also for taking the time and care to resolve the issue.

     Yes, I spend more time getting IE6,7, 8 and 9 to behave themselves than on the rest of our project tasks put together … well, almost 😉

     Silly question though, where do we get the new version of the jQuery UI from?

103. Simon says:

     July 6, 2011 at 6:43 pm

     Problem was that the version of jQuery UI the pages were using breaks in IE9. Good old IE…..
     I’ve updated the version and it seems fine in IE9 now.

104. Gavin says:

     July 5, 2011 at 11:31 pm

     Hi Simon

     Thanks for sharing your knowledge! I have used both the standard version of your scrollbar as well as the one using an image for the grip.

     I noticed today that with both versions the grip does not work in I.E.9 I know you do not support your work but was wondering whether you know of any possible reason?

     Thanks again …

     Gavin

105. Simon says:

     July 1, 2011 at 8:20 pm

     I’ve added a new variant to support scrolling via anchors.

106. Johnny says:

     July 1, 2011 at 7:28 pm

     Hi,

     Nice scroller. Do it supports scrolling using anchors?

     regards, Johnny

107. Simon says:

     June 16, 2011 at 5:54 pm

     Hi Ethan

     In some of the other examples above I’ve catered for this by checking if the scrollbar exists – but your solution would work equally well – nice idea.

108. Ethan Hackett says:

     June 15, 2011 at 8:22 pm

     Thanks for the plugin. I have a gallery that I wanted to be able to scroll larger the large image that’s replaced by thumbnails.

     Long story short the scrollbars were stacking because your code uses “.after()” which will start to stack. I created a div to contain the scroll bar and then used .html() instead so it automatically replaces. That made a little more sense to me personally.

109. eleni says:

     June 8, 2011 at 6:21 pm

     I use the code from the demo -page.Really helpfull after spending hours on looking for a slider -verical!!Thanks!!!!!

110. hes says:

     May 4, 2011 at 4:44 pm

     Thanks, man!!! I found one bug with the latest version of jquery. When you drag the slider, sometimes you drag the url instead. Strange. With older version you used is everything ok.

111. Simon says:

     May 4, 2011 at 4:07 pm

     Alan, if you have a look under “Variations – 26 November 2010 – Using an image for the slider handle” on my page then you’ll see an explanation of how I used images on the scrollbar handle.
     There’s an example page here.

     The example code allows for a separate top and bottom image which would work for your arrows.

112. Alan says:

     May 4, 2011 at 3:45 pm

     Hi, great bit of code. What would be the best way of adding little arrows heads at the top and bottom of the scroll bar. ?

     Thanks

113. Simon says:

     April 13, 2011 at 6:55 pm

     Hi Igor

     Thanks, I’ve added another variation above to cope with a percentage height .scroll-pane and window resize. I think however, for a fixed height .scroll-pane I wouldn’t expect a window resize to invoke or remove a scrollbar.

114. Igor says:

     April 13, 2011 at 1:01 pm

     Hi,

     Great tool, I’ve been playing around a little bit, I had following question/comment:
     Let’s say #scroll-pane is set with a height: 550px, the scroll-content is not much, the scrollbar is not shown…
     After resizing the browserwindow [IE, FF, Opera, …] to a height, let’s say 220px, the scrollbar remains invisible…

     Also, how about a height: 100% instead of a fixed height…

     Kind regards,
     – Igor

115. Simon says:

     April 11, 2011 at 6:45 pm

     Mike

     Thanks. You’re right, I wasn’t catering for the scrollbar not being required after a resize. I’ve added this to the demo now.

116. Mike says:

     April 11, 2011 at 9:49 am

     Great tool. I am using the Ajax version…. there is an issue with the resizing of scroll. The resizing works fine, but fail to hide the scrollbar if it is not required once added already. I think your scripts only appends to the existing scroll but it doesn’t reset the scroll. Is there any way to reset the scroll (ajax version with dynamic content)?

     Regards,
     Mike

117. Brandon says:

     March 25, 2011 at 6:18 am

     Very, very good.

118. george says:

     February 24, 2011 at 11:24 pm

     Thanks so much for this Simon. It’s been a big help.

119. Simon says:

     February 22, 2011 at 8:38 am

     Hi Mitch

     Thanks for asking, that’s fine.

     Simon

120. Mitch Malone says:

     February 22, 2011 at 12:57 am

     Simon,

     I have partially rewritten this function as a plugin that can be recycled and reused throughout a page. I just thought I’d drop you a note and ask if you mind if I release this plugin on Github, with obvious credit to your original work?

     You can see my code here: http://jsfiddle.net/mitchmalone/XRnxL/

     Kind regards,

     Mitch Malone

121. Simon says:

     February 16, 2011 at 8:30 pm

     Hi Lorife

     I’ve not built this with the theme in mind, so it doesn’t surprise me that it’s not quite right – in fact the handle moves correctly, but the background to the scrollbar isn’t long enough as you say. I added the #slider-wrap element to cope with this and make it more flexible. However, you can combine the demo with a coloured background and the demo with an image for the handle to create pretty much any styling you want.

122. lorife says:

     February 16, 2011 at 12:32 pm

     Hi,
     your component is great..but i have a problem when using jquery Ui theme.

     try using your main demo with the standard theme Ui-lightness and you’ll see that the scrollbar is the wrong size..

     please can you fix it?

123. Ohmish says:

     February 13, 2011 at 2:03 am

     Hi again
     I fiddled a bit with it, and found out that I could just use this to scroll down:
     $(“#slider-vertical”).slider(“value”, 0);
     $(‘#scroll-content’).css({top:-difference});

124. Ohmish says:

     February 13, 2011 at 1:25 am

     Hey Simon

     Do you know an easy way to scroll down to the bottom of the text in your scrollbar?
     Something like
     $(‘#somebutton’).click(function() {
     // scroll down to bottom code
     });

125. Simon says:

     February 5, 2011 at 7:18 pm

     Hi Brent

     Thanks – I think in fact I originally had it set up as you describe, but added the height setting into the javascript just to make it more portable.

126. Brent says:

     February 5, 2011 at 1:36 pm

     Hi,

     Thanks for this. I made a small change that might help others in the future.

     I didn’t want the height of the scroll bar to be as long as #scroll-pane, ie: the scroll bar proportions needed calculating based on the height of #slider-wrap, not #scroll-pane. My change also meant I could lose a line of JS and replace it with a single CSS rule.

     What I did in detail:

     Replaced this:

     var handleHeight = Math.round((1-proportion)*$('#scroll-pane').height());//set the proportional height - round it to make sure everything adds up correctly later on
        handleHeight -= handleHeight%2; //ensure the handle height is exactly divisible by two
     
        $("#scroll-pane").after('');//append the necessary divs so they're only there if needed
        $("#slider-wrap").height($("#scroll-pane").height());//set the height of the slider bar to that of the scroll pane

     With this:

     $("#scroll-pane").after('');//append the necessary divs so they're only there if needed
        var handleHeight = Math.round((1-proportion)*$('#slider-wrap').height());//set the proportional height - round it to make sure everything adds up correctly later on
        handleHeight -= handleHeight%2; //ensure the handle height is exactly divisible by two

     … and then gave #slider-wrap a height in CSS.

127. Simon says:

     February 5, 2011 at 10:43 am

     Hi Daniel

     Not trivial to adapt for a table I think, because you need two nested elements (#scroll-pane and #scroll-content) to allow the scrolling to work, and the table html construct doesn’t immediately lend itself to this. I haven’t tried this, but an approach might be maybe split thead and tbody into two different tables, then wrap a div around tbody for the scrollng.

128. Daniel says:

     February 3, 2011 at 1:38 pm

     SImon, thanks this is very close to what I need. Can it be adapted to scroll a tbody while leaving the thead in place?

129. Simon says:

     January 30, 2011 at 5:58 pm

     Mohsin

     Thanks for your comment. I don’t know what you mean by glitch with scroll speed. If you can give further information I’ll have a look.

130. mamjed says:

     January 23, 2011 at 7:53 am

     Amazing! I have been looking for something like this for ages. I have one question, how would I have jquery recalculate the amount needed to be scrolled if I had the contents change size?

     Just saw the alternative method, but there is a glitch, upon resizing the scroll speed gets messed up, and fixes?

131. Simon says:

     January 20, 2011 at 8:20 am

     I don’t think the way this works lends itself to using easing – see my reply #26 above.

     EDIT: This is possible with a bit of a tweak – see the example under variations section above.

132. Gustavo Bordoni says:

     January 19, 2011 at 12:10 am

     I was thinking, I will try to do something like this with some easing on the scroll do you think its possible?

     Thanks for setting this up

133. Simon says:

     January 14, 2011 at 7:51 pm

     Thanks Juan. I’ve added a simple demo adding draggable/droppable to the basic slider to the variations section, and there’s a demo here.demo here.

134. Juan Olano says:

     January 13, 2011 at 11:20 pm

     This is just great… thanks!!!! At this point I am thinking that this offers a quick way to locate an item.. How abot dragging / dropping capabilities to another div? similar to the Shopping Cart example in jqueryUI.com, where you can drag an element from a Accordion into a basket. I would love to be able to use this that way…

     Thanks!

135. Simon says:

     January 13, 2011 at 7:51 pm

     Hello again

     If you amend the speed variable on this line:

     var speed = 5;

     then I think that addresses your scroll wheel problem – not something I’ve noticed really. Increasing the speed variable means less mousewheel turns are required. If this still doesn’t do it, then it would be possible to set the variable programatically dependent on the relative size of the scroll pane and the scroll content.

     EDIT: Clicks at the end of the scrollbars should now work OK – see changelog for 16 January, and update 1 March.

136. Ohm-ish says:

     January 13, 2011 at 6:48 pm

     Some minor “bugs”:

     The less content – the more you have to roll the mousewheel to scroll.
     If the content is only 1 textline bigger than the box, I have to roll the wheel many times to see it (seems like a percentage thing).
     Can I somehow adjust the number of lines the scrollwheel scrolls maybe?

     Clicking on the very top and bottom of the scroll pane has no effect (I have to hit below/over the middle of where the scrollbutton would be)

     Hope it makes sense

137. Simon says:

     January 13, 2011 at 6:45 pm

     As it stands, I don’t think you could apply easing, as the scrolling is not done via .animate. However, changing this line in the jQuery:

     $('#scroll-content').css({top:topValue});

     to this:

     $('#scroll-content').animate({top:topValue},20)

     Should allow you to use some easing. Having experimented, however, I don’t think it works very well since each individual move of the scrollbar produces only a small animation and hence any easing is not very evident, if at all. Prepared to be corrected on this if anyone has managed it…

     EDIT: OK, corrected myself. The trick is to call the animation from the change event instead of the slide event. Have a look at the example under variations section above.

138. Ohm-ish says:

     January 12, 2011 at 4:37 pm

     Hey. Nice work!

     Would it be easy/possible (for me or you) to add some easing using jquery?

139. Simon says:

     January 12, 2011 at 12:33 pm

     See under the variations section for some comments on this, and here for a demo.

140. rstat1 says:

     January 12, 2011 at 1:52 am

     First thanks for this awesome bit code. It was big help to me on a current project.

     The only issue I’m having is updating the handle size when content is added via AJAX. It’ll still scroll but the slider goes less than a quarter of the way down and stops, refusing to go any further

141. Simon says:

     January 8, 2011 at 10:21 am

     Wow, two requests in the space of a few days asking the same thing! I’ve added this under the variations section, and there’s a demo here.

142. Randall says:

     January 7, 2011 at 11:03 pm

     Love this simple approach! I have simplified it even more and made some changes for my use but nothing needs to be changed with your code.

     Now how could we get more than one of these to function properly in a page at a time? I would love to be able to use this that way:D

     Cheers!

143. Ashish says:

     January 3, 2011 at 7:40 am

     What about using the scrollable DIVs in two tabs? Sorry, its not working at my end while trying with tabs and both tabs may have scrollable DIV. Please suggest.

144. Simon says:

     November 24, 2010 at 1:25 pm

     Hi Robert

     I’m not quite sure myself whether this makes for a good user experience. However, it’s simply done. I’ve positioned #slider-wrap absolutely within #scroll-pane. This necessitates a change to the css:

     #slider-wrap{position:absolute;top:0;right:0;background-color:lightgrey;width:20px;border-left:1px solid gray;}

     and then using .append instead of .after to insert #slider-wrap:

     $("#scroll-pane").append('<\div id="slider-wrap"><\div id="slider-vertical"><\/div><\/div>');

     and finally adding the show and hide code:

     $("#slider-wrap").hide();//hide the slider after it's set up
     $("#scroll-pane").hover(function(){	$("#slider-wrap").show();},function(){$("#slider-wrap").hide();});//show on hover

     You can see an amended demo here.

145. Robert says:

     November 23, 2010 at 9:37 pm

     How about auto-hide function?
     If you move mouse out of div region it hides. If you move inside div region it shows on div content (space saving technique).

146. Simon says:

     November 15, 2010 at 5:28 pm

     Thanks for your comment. My proportion calculation is not wrong – you are achieving the same result by a different way by changing both the proportion and handleHeight calculations.

     Your extra line of code ensuring the handleHeight is divisible by two is a good idea and in some cases stops the handle finishing one pixel short. I’ve added this to the code.

147. Thom says:

     November 15, 2010 at 4:42 pm

     Hi Simon, thanks for sharing this – however, doing some testing I found the proportion formula to be wrong used to calculate the size of the handle, it should be:

     var proportion = pane.height()/content.height();

     I’ve also tweaked the handle formula a bit ensuring we get whole numbers after multiplying by 0.5:

     var handleHeight = Math.round(proportion*pane.height());
     handleHeight -= handleHeight%2;//Make sure this is divisible by 2 as we're multiplying by 0.5 later on
     

148. Simon says:

     November 11, 2010 at 11:06 am

     I’ve added this functionality now – by checking if the scrollbar is required, and only adding if it is.

149. Jorge says:

     November 8, 2010 at 4:53 am

     How can I hide the scrollbar when it’s not needed?

150. Simon says:

     November 1, 2010 at 1:30 pm

     Hi Adrian

     You should be able to do this quite simply by adding the following at the start of the javascript:

     $("#scroll-pane").height($(window).height()-200);//set the scrollpane to the window height - 200px
     $("#slider-wrap").height($("#scroll-pane").height());//set the slider height the same as the scrollpane height
     

     Hope that helps

151. Adrian says:

     November 1, 2010 at 12:16 pm

     Hi, this is almost exactly what I’ve been looking for, thank you…

     However the one remaining issue I have is I need the height of the scroll area to be the browser height (minus 200px for the header/footer)

     Any ideas?

152. Simon says:

     October 4, 2010 at 8:57 am

     Yes, that’s pretty straightforward. I can use the .ui-slider-range element which is created by the javascript. This needs a bit of css:

     .ui-slider-range{background-color:yellow;position:absolute;width:100%}

     and a small addition to the javascript:

     $(".ui-slider-range").css({top:-sliderMargin});

     after the slider height and margins are set. You can see an amended demo here.

153. Php coder from Goa, India says:

     October 4, 2010 at 7:51 am

     Hi,
     Is it possible to color scroll bar like this one? http://jqueryui.com/demos/slider/#slider-vertical

     Kind Regards

154. Simon says:

     September 27, 2010 at 3:48 pm

     Thanks. Yes, my demo page works with the mousewheel anywhere on the page – in a real-life situation you would make the mousewheel more specific using something like:

     $("#mydiv").mousewheel(function(event, delta){...etc

155. Yann says:

     September 27, 2010 at 3:38 pm

     This is well done and interesting, thanks for sharing… I have added a few lines to my version of your code that enables mousewheel only when the mouse is over the element to scroll, or in the actual state your document (your page) will not scroll at all, only your div will.

     I’m pretty sure I’ve done it the wrong way, that’s why I leave you do it better than me. (for example with my code, I cannot have two scrollbars on the same page, but that’s OK for me).

156. Winter says:

     September 13, 2010 at 6:16 pm

     Being looking for this solution for so long…… I feel like crying now (believe me), thanks!!!!!!!!

157. Simon says:

     September 8, 2010 at 2:23 pm

     Rob – you’re right – I’d noticed that myself earlier and never got round to having a look at it. It’s now fixed.

158. Rob says:

     September 8, 2010 at 2:04 pm

     Great adaptation! Slight problem though, in that the drag bar does not track the exact location of the mouse. I saw that on the demo page under Chrome and IE 8.

159. Simon says:

     August 12, 2010 at 8:34 am

     Hi Dan

     Interesting suggestion – I’ve added this functionality to the basic slider here.

160. Dan says:

     August 10, 2010 at 11:36 am

     I’ve begun using this to try it out; I was thinking exactly the same… editing the horizontal and the nightmare began ensuing. This is a great solution to an obvious problem, well done.

     I’m intrigued as to whether ‘auto-complete’ type functionality can be factored into this at all? I’ve got a lot of options in my slider (it’s used to navigate through a user’s assets) and quick finding what you want would be a great addition. i.e. moving slider to a position with an event?

     Great to hear your thoughts; and if its just silly.

161. Simon says:

     July 30, 2010 at 10:53 am

     Thanks. You could try this plugin for the mousewheel.

     EDIT:Mousewheel support is now included on the demo.

162. Yves says:

     July 30, 2010 at 10:36 am

     Thanks for the informative article. Mouse-wheel support would certainly be a great addition !