Auto-scrolling a DIV with overflow:scroll/auto

epp_b · December 1, 2005, 3:58pm

I know it’s possible to automatically scroll an entire HTML document. Is there a way to automatically scroll a <DIV> where the CSS overflow attribute is set to auto (and there is a forced scrollbar) or scroll?

SpaceFrog · December 1, 2005, 4:02pm

something like this ?


<body>
 <div id="ecran" style='overflow:auto;width:200px;height:200px;border:solid 1px green;'>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</div>

	
<script type='text/javascript'>
function ScrollDiv(){

   if(document.getElementById('ecran').scrollTop<(document.getElementById('ecran').scrollHeight-document.getElementById('ecran').offsetHeight)){-1
         document.getElementById('ecran').scrollTop=document.getElementById('ecran').scrollTop+1
         }
   else {document.getElementById('ecran').scrollTop=0;}
}

setInterval(ScrollDiv,50)
</script>
</body>

epp_b · December 1, 2005, 5:07pm

Hi SpaceFrog,

Thanks for the code. While I didn’t use your code byte-for-byte, I did use certain parts of it to help me along with the final code, which ended up like this:

<html>
<head>
<script language="javascript">
ScrollRate = 100;

function scrollDiv_init() {
	DivElmnt = document.getElementById('MyDivName');
	ReachedMaxScroll = false;
	
	DivElmnt.scrollTop = 0;
	PreviousScrollTop  = 0;
	
	ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}

function scrollDiv() {
	
	if (!ReachedMaxScroll) {
		DivElmnt.scrollTop = PreviousScrollTop;
		PreviousScrollTop++;
		
		ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
	}
	else {
		ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;
		
		DivElmnt.scrollTop = PreviousScrollTop;
		PreviousScrollTop--;
	}
}

function pauseDiv() {
	clearInterval(ScrollInterval);
}

function resumeDiv() {
	PreviousScrollTop = DivElmnt.scrollTop;
	ScrollInterval    = setInterval('scrollDiv()', ScrollRate);
}
</script>
</head>
<body onLoad="scrollDiv_init()">
<div id="MyDivName" style="overflow:auto;width:200px;height:100px" onMouseOver="pauseDiv()" onMouseOut="resumeDiv()">
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</body>
</html>

This code can:

Start the div scrolling down
Scroll back up when it reaches the end
Pause when the user mouses over the div
Resume at any location the user places the scrollbar when the user on mouses out

Thanks!

SpaceFrog · December 2, 2005, 7:42am

no prob ! glad it helped

CRUZ__ · April 22, 2007, 3:21am

Thanks alot for this

Could you please show me what to take out or add to stop it going to the top, so that it continuiously scrolls down. Or Up would be ok also, i just want one direction.

Thanks I find this very helpfull.

epp_b · April 22, 2007, 12:01pm

Holy old thread, batman!

Just use clearInterval() when the scroll height is equal to the document or element height, whichever is applicable.

CRUZ__ · April 22, 2007, 12:11pm

wow thanx for the reply, I dont understand what you said one bit sorry im not that brilliant could you plz explain or show me an example , I would like it to scroll up “only” continiously and not down, but everything else is perfect.

I tried and changed this the line

ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);

To

ReachedMaxScroll = DivElmnt.scrollTop >= clearInterval();

But that just made it scroll to up then stop scrolling at the end of the text. I need it to loop so that it scrolls back up to the first line of text at the top again as in a new cycle.

Thanx alot again for the reply, sorry to bother you lol

epp_b · April 22, 2007, 12:20pm

^ People learn best when they learn how to teach themselves

Although, it seems I misunderstood you initially. What you need to do is use the clearInterval() function when it gets to the top, set the scrollbar to the bottom of the page, then reset the interval using setInterval(). To detect when the scrollbar is at the top of the document/element depends on the browser. I think I have given you enough step-by-step information that you can use Google to find out what you need to do with this programmatically.

CRUZ__ · April 22, 2007, 1:53pm

Thsnx lots i will search and yea im learning this from scratch.

MikeFoster · April 22, 2007, 2:19pm

This demo uses [url=http://cross-browser.com/x/examples/xaniscroll.html]xAnimation.scroll to scroll a DIV.

A related demo: xWinScrollTo

CRUZ__ · April 22, 2007, 2:48pm

wow thanx man. I think this is too much for me ill see how i go.

MikeFoster · April 23, 2007, 4:17am

Stick with what epp_b was saying and just use my site as one of the resources he was referring to

CRUZ__ · April 23, 2007, 4:58am

ok thanx alot man, I dunno where to start tho, I dont know where the bottom or the scroll starts or where to set the interval. I think i will just use the code he made and posted up there ^^^^ thatll have to do Thanks guys

MikeFoster · April 23, 2007, 5:12am

Don’t give up!

Have you experimented with it? For example, look at what happens when you comment out the “else” block:


<html>
<head>
<script language="javascript">
ScrollRate = 10;

function scrollDiv_init() {
	DivElmnt = document.getElementById('MyDivName');
	ReachedMaxScroll = false;
	
	DivElmnt.scrollTop = 0;
	PreviousScrollTop  = 0;
	
	ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}

function scrollDiv() {
	
	if (!ReachedMaxScroll) {
		DivElmnt.scrollTop = PreviousScrollTop;
		PreviousScrollTop++;
		
		ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
	}
/*
	else {
		ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;
		
		DivElmnt.scrollTop = PreviousScrollTop;
		PreviousScrollTop--;
	}
*/
}

function pauseDiv() {
	clearInterval(ScrollInterval);
}

function resumeDiv() {
	PreviousScrollTop = DivElmnt.scrollTop;
	ScrollInterval    = setInterval('scrollDiv()', ScrollRate);
}
</script>
</head>
<body onLoad="scrollDiv_init()">
<div id="MyDivName" style="overflow:auto;width:200px;height:100px" onMouseOver="pauseDiv()" onMouseOut="resumeDiv()">
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</body>
</html>

CRUZ__ · April 23, 2007, 11:37am

well i have experimented with it yes. I got it to do what u just posted above by changing that one line in my post 2. I cant make it continiously scroll tho. I dont like to give up on things i have search java scripts all day and they all look different to me, only some things are starting to look a little familar. Your site is kewl Mike very interesting and informative. Thanks alot for your assistance, there arent many sites you can get such help.

MikeFoster · April 23, 2007, 1:32pm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Auto Scroller</title>
<style type='text/css'>
#MyDivName {
  overflow:auto;
  width:200px;
  height:100px;
}
</style>
<script language="javascript">
window.onload = function() {
  scrollDiv_init();
};
ScrollRate = 10;
function scrollDiv_init() {
  DivElmnt = document.getElementById('MyDivName');
  DivElmnt.onmouseover = pauseDiv;
  DivElmnt.onmouseout = resumeDiv;
  ReachedMaxScroll = false;
  DivElmnt.scrollTop = 0;
  PreviousScrollTop  = 0;
  ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
function scrollDiv() {
  if (!ReachedMaxScroll) {
    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop++;
    ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
  }
  else {
    DivElmnt.scrollTop = PreviousScrollTop = 0;
    ReachedMaxScroll = false;
/*
    ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;
    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop--;
*/
  }
}
function pauseDiv() {
  clearInterval(ScrollInterval);
}
function resumeDiv() {
  PreviousScrollTop = DivElmnt.scrollTop;
  ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
</script>
</head>
<body>
<div id="MyDivName">
11111 11111 11111<br>22222 22222 22222<br>text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text<br>Almost Last Row<br>text text text<br>Last Row
</div>
</body>
</html>

CRUZ__ · April 23, 2007, 2:44pm

Cheers man That would have taken me weeks or longer at my rate . I will study the code and learn from it.

I appreciate your help and kindness. Thanks again.

EDITED

CRUZ__ · April 23, 2007, 11:24pm

Hey Is there a way to make it not bounce to the top atfer a complete scroll ?

Instead could it start with the first line of text comming form the bottom upwards.

MikeFoster · April 24, 2007, 3:12am

Anything is possible

CRUZ__ · April 24, 2007, 9:13am

oK THANX