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

Répandez vos soluces sur la planète

Love me
Solucior » JAVASCRIPT » Scroll div horizontal avec javascript

Scroll div horizontal avec javascript

09/12/2011 par Dux   -   4.1/5 (44 notes)

Méthode très simple pour faire défiler le contenu d'un DIV horizontalement sans afficher les barres de défilement.

- Le div conteneur est en overflow:hidden et largeur hauteur fixes.
- Son ID doit être rappelé dans les appels de la fonction scrolldiv(). Cela autorise l'utilisation multiple de cette fonction sur une même page.

Demo.

image large


code source



 
<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" />

Testé avec Safari  Google Chrome  Firefox3  Firefox4  Opera  IE6  
Noter ce code     |     Copié : 874x

Commentaires pour Scroll div horizontal avec 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...
Ajouter un commentaire Pseudo
ZOOM