Use JS/jQuery to scroll a div's content that has overflow: scroll applied
10,449
With jQuery the scrolling can be handled like in this example:
$(function(){
var iv;
var div = $('#content');
$('#left').mousedown(function(){
iv = setInterval(function(){
div.scrollLeft( div.scrollLeft() - 4);
},20);
});
$('#right').mousedown(function(){
iv = setInterval(function(){
div.scrollLeft( div.scrollLeft() + 4);
},20);
});
$('#left,#right').on('mouseup mouseleave', function(){
clearInterval(iv);
});
});
JSFiddle:
http://jsfiddle.net/jdNa9/1/ (basic example)
http://jsfiddle.net/jdNa9/3/ (with a bit updated CSS)
Related videos on Youtube
Author by
Kev
Updated on September 15, 2022Comments
-
Kev over 1 year
So I have a div, with a bunch of content inside it that is wider than the div. I have set
overflow-x: scroll
and all is well. However I'd like to have two links on my page that allow the user to scroll the content within the div left and right (mimicking the standard scrollbar arrow functionality). Is that possible? -
Kev over 10 yearsThanks for the response, that works, but the other answer allows for some extended functionality. Thanks though :)
-
Kev over 10 yearsThat's just what I needed. Thanks :)