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?
-
I mean two links that make the content scroll left/right when clicked.Kev– Kev2013-08-03 08:09:49 +00:00Commented Aug 3, 2013 at 8:09
Add a comment
|
2 Answers
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)
1 Comment
Kev
That's just what I needed. Thanks :)
Use jQuery .scrollLeft(). For example if you want to scroll 300 pixels:
$("a.your_link").click(function(){
$("#your_container").scrollLeft(300);
});
1 Comment
Kev
Thanks for the response, that works, but the other answer allows for some extended functionality. Thanks though :)