Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Spread your code soluces to the world

Love me
Solucior » JAVASCRIPT » Horizontal scroll div with javascript

Horizontal scroll div with javascript

09/12/2011 by Dux   -   4/5 (42 ratings)

Very simple method to horizontally scroll a DIV content without displaying scrollbars with Javascript.

- The container div has overflow:hidden and a fixed height and width.
- Its ID has to be recalled in the scrolldiv() function calls. This allows the multiple use of this function on the same page.

Demo.

image large


source code



 
<script type="text/javascript">  
var
timer1;
function
scrollDiv(divId, depl) {
  var
scroll_container = document.getElementById(divId);
 
scroll_container.scrollLeft -= depl;
 
timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 10);
}
</script>

<div style="float:left; width: 30px">
   <input type="button" value="«" style="height: 100px" onmousedown="scrollDiv('MyDiv', 3)" onmouseup="clearTimeout(timer1)" />
</div>
<div id="MyDiv" style="float: left; width: 150px; height: 100px; border: 1px solid; overflow: hidden">
   <img src="picture2.jpg" alt="image large" style="height: 100px" />
</div>
<div style="float:left; width: 30px">
   <input type="button" value="»" style="height: 100px" onmousedown="scrollDiv('MyDiv', -3)" onmouseup="clearTimeout(timer1)" />
</div>

<br style="clear:both" />

Tested with Safari  Google Chrome  Firefox3  Firefox4  Opera  IE6  
Rate this code     |     Copied : 871x

Comments for Horizontal scroll div with javascript

fabio     06/21/2012 11:53
good code, thanks
TFZach     11/02/2011 21:38
Works great and is easy to modify.

I had it triggered by an image instead of a button.

Also I changed onmousedown="scrollDiv('MyDiv', 3)"  to onmousedown="scrollDiv('MyDiv', 1)"  to slow down the scrolling.
gg     09/24/2011 11:09
for me its not working in firefox 6.0.2 on mac osx 10.6.8. in webkit everything is fine!

Could you maybe look up why it is not working? here ist the website:

www.michaela-moeller.com/michaela/index.html
Dux     09/23/2011 12:20
This code works on my Firefox 6.0.2 Mac OSX 10.5
gg     09/23/2011 10:12
why it is not working with firefox 6???

and how comes that it is not ignoring something like that <!-- <div class="..."> </div> -->.
only if this is in the code it is working...
BARANG     09/22/2011 07:37
wew...
Add a comment Nickname
ZOOM


Dynamic image resizing according to location
Javascript Image magnification
Div following the scrolling of the page
Scroll div with javascript
Show hide DIV content with scrolling
Infinite zoom CSS3 and Javascript
Move dynamically a DOM objet up
Dynamically resizing height of textarea
Close HTML tags function
Zoom with CSS3