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

Spread your code soluces to the world

Love me
Solucior » JAVASCRIPT » Scroll div with javascript

Scroll div with javascript

05/25/2011 by Dux   -   4.4/5 (48 ratings)

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

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

Demo.

Méthode très simple pour faire défiler un DIV sans afficher les barres de défilement.
Le div conteneur est en overflow:hidden et hauteur fixe. 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.

Very simple method to scroll a DIV without displaying scrollbars with Javascript.
- The container div has overflow:hidden and a fixed height.
- Its ID has to be recalled in the scrolldiv() function calls. This allows the multiple use of this function on the same page.
To Top To Bottom

source code



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

<div id="MyDiv" style="width: 200px; height: 100px; border: 1px solid; overflow: hidden">
   Your text here    
</div>
<a href="javascript:void(0)" onmouseover="scrollDiv('MyDiv', 3)" onmouseout="clearTimeout(timer1)">To Top</a>
<a href="javascript:void(0)" onmouseover="scrollDiv('MyDiv', -3)" onmouseout="clearTimeout(timer1)">To Bottom</a>

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

Comments for Scroll div with javascript

anonymous     03/03/2016 13:08
Looking for a simple scrolling example. Thank you
Very Happy     04/05/2015 12:37
OMG THANK YOU! So awesome and simple, been searching for at least an hour for this. THANK YOU
alex     05/17/2013 16:35
is it possible to make it onClick instead of hover?
lafumee     01/17/2013 19:05
parfait ce bout de code et en plus il est facilement magniable.merciiiiiiiiiiiiiiiiiiii
Jack     06/07/2012 14:10
how to add right & left scroll
Admin     04/23/2012 15:44
You can use html entities alexandre.alapetite.fr/doc-alex/alx_special.html
or html tag input image with an image file
cabbar     04/19/2012 23:40
is it possible to have up and down arrows instead of text?
Admin     04/11/2012 20:10
Think its possible and easy to move to an anchor with a Javascript scroll.
carrie     04/10/2012 10:29
Hmmm this may be the closest to what I'm looking for that i've found in my searches...
Any advice for how to make this an onclick instead of mouseover and how to make it scroll a designated amount of pixels or to an anchor point instead of all the way to the top or to the bottom?
I'm pretty new at all of this.
krabouiboui     01/08/2012 12:53
Simple et efficace ;)
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