AutoScrolling a DIV tag

Question

zeromancer 0 Newbie Poster

19 Years Ago

Sorry for the double post. but it wasn't even remotely in the right spot before.

I wrote this little code segment to illustrate the idea of what I want. I'd like to be able to automatically scroll the DIV to the bottom when you add stuff to it.

<html>
<head>
<title>Auto Scrolling Div</title>
<head>
<script type="text/javascript">
<!--
function addStuff() {
    var stuff = document.getElementById('foo').value;
    oldStuff = document.getElementById('bar').innerHTML;
    newStuff = oldStuff + ' ' + stuff;
    document.getElementById('bar').innerHTML = newStuff;
}
-->
</script>
</head>
<body>
<div id="bar" style="overflow: auto; height: 150px; width: 100px;">
Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff
Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff
Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff
</div>
<input type="text" id="foo">
<input type="submit" value="Add Stuff" onclick="addStuff()">
</body>
</html>

So, you type something in and click Add Stuff. It will scroll to the bottom so you can see what you just added. That would be awesome.

Thanks in advance

javascript

5 Contributors
11 Replies
1K Views
2 Years Discussion Span
Latest Post 16 Years Ago Latest Post by digital-ether

tgreer 189 Made Her Cry

19 Years Ago

Research the JavaScript "scrollTo" method, then post a follow-up if you have any specific questions about it.

tgreer 189 Made Her Cry

19 Years Ago

Understood. Your next assignment, then, is to research "offsetTop" and "offsetParent".

tgreer 189 Made Her Cry

19 Years Ago

You have to explain exactly what it is you want. You cannot scroll, as far as I know, the inner contents of a DIV element. However, you can scroll the browser window, using the "scrollTo()" method.

You can know the size of an element, using it's "clientHeight" property, for example, and its position on the page, using offsetTop & offsetParent.

Here's a simplistic example of scrolling:

<html>
<head>
<script type="text/javascript">

function myScroll()
{
  x = document.getElementById("myDiv");
  h= x.clientHeight;
  self.scrollTo(0,h);
}

</script>
</head>
<body onload="myScroll();">
<div id="myDiv">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Donec tristique lectus sit amet est. Vivamus sit amet lacus. 
Morbi convallis sem nec lectus. 
Nullam in odio ac augue porttitor semper. 
Nam leo. Morbi varius molestie felis. Etiam egestas. 
Donec vitae mauris vitae nisi gravida pharetra. In molestie eros eu tellus. 
Suspendisse a mi vitae nulla vehicula lacinia. 
Ut pellentesque lobortis ipsum. Quisque a leo. Curabitur tincidunt. 
Fusce est velit, condimentum sed, convallis in, blandit hendrerit, eros.
</p>
</div>
</body>
</html>

I simply measure the clientHeight of the DIV element, and tell the browser to scroll to that position. This doesn't take into account that the DIV might be nested, etc. You'll need to use the offsetTop and offsetParent properties to make the code robust. Search for those terms, you should easily find everything you need, which is why I didn't spell it all out for the previous poster.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

zeromancer 0 Newbie Poster · Answer 1 · 2005-08-26T06:09:55+00:00

I founf that, but the next problem i ran into was finding out where i should scroll to. in other words, finding out where the bottom of the DIV is.

mbowles 0 Newbie Poster · Answer 2 · 2005-09-22T00:35:04+00:00

Zero, you ever get this? I have a div that holds an asp.net Label and need it to scroll to the bottom.

mbowles 0 Newbie Poster · Answer 3 · 2005-09-22T01:18:58+00:00

Yeah, I needed to scroll the contents of a div. I went back and modified my StringBuilder to use insert instead of append and now my text gets added to the top of the display so with aut scroll of style tags kicks in, it scrolls the old stuff out the bottom. Was building a chat system for our portal.

thanks

zeromancer 0 Newbie Poster · Answer 4 · 2005-09-23T23:33:46+00:00

here's the answer. thanks to those that tried to help.

<html>
<head>
<title>w00t!</title>
<script type="text/javascript">
<!--
function addStuff()
{
  var loc = document.getElementById('myDiv');
  var stuff = document.getElementById('in').value;
  var old = loc.innerHTML;
  loc.innerHTML = old+stuff+'<br />';
  var div = document.getElementById('myDiv');
  h = div.scrollHeight;
  div.scrollTop = h;
}
-->
</script>
</head>
<body>
<div id="myDiv" style="overflow: auto; height: 200px; width: 300px; border: 1px solid #666; background-color: #ccc; padding: 8px"></div>
<br />
<input type="text" id="in">
<input type="button" onclick="addStuff()" value="Add">
</body>
</html>

dRoot84 0 Newbie Poster · Answer 5 · 2008-01-09T05:49:51+00:00

Hi guys, I know this thread was years ago, but I think many many people are looking for a solution for this problem but not finding anything.

Scrolling a scrollable DIV tag is pretty easy by using the fabulous prototypejs framework by www.prototypejs.org.

Lets see what we've got here...

some html:

<div id='scrollContainer'> <!-- set stiggi yiggy in your css file (#scrollContainer) ;) !-->
  <div id='scrollTo1'>maaaany</div>
  <div id='scrollTo2'>maaaany</div>
  <div id='scrollTo3'>maaaany</div>
  <div id='scrollTo4'>maaaany</div>
  <div id='scrollTo5'>...content</div>
</div>

Now we do the script thing...

Whith that you can easily scroll to a specific element in your scroll container: $('scrollContainer').scrollTop = $('scrollTo3').cumulativeScrollOffset()[1]; :icon_eek: Whoops... one line of code? oh yes baby, yes!

I LOVE PROTOTYPE! :icon_redface:

digital-ether 399 Nearly a Posting Virtuoso Team Colleague · Answer 6 · 2008-01-09T20:50:37+00:00

Hi guys, I know this thread was years ago, but I think many many people are looking for a solution for this problem but not finding anything.
Scrolling a scrollable DIV tag is pretty easy by using the fabulous prototypejs framework by www.prototypejs.org.
Lets see what we've got here...
some html:
<div id='scrollContainer'> 
  <div id='scrollTo1'>maaaany</div>
  <div id='scrollTo2'>maaaany</div>
  <div id='scrollTo3'>maaaany</div>
  <div id='scrollTo4'>maaaany</div>
  <div id='scrollTo5'>...content</div>
</div>
Now we do the script thing...
Whith that you can easily scroll to a specific element in your scroll container: $('scrollContainer').scrollTop = $('scrollTo3').cumulativeScrollOffset()[1]; :icon_eek: Whoops... one line of code? oh yes baby, yes!
I LOVE PROTOTYPE! :icon_redface:

You don't need prototype for something this simple. The post just before this actually had the solution.

You can also do something as simple as:

div.scrollTop = 10000;

Giving any element a scrollTop of a number larger than its height will scroll it to the bottom. So any large number you know the div height will not exceed will work.

dRoot84 0 Newbie Poster · Answer 7 · 2008-01-10T12:08:46+00:00

You don't need prototype for something this simple. The post just before this actually had the solution.
You can also do something as simple as:
div.scrollTop = 10000;
Giving any element a scrollTop of a number larger than its height will scroll it to the bottom. So any large number you know the div height will not exceed will work.

Crystal clear, but this was not what I wanted. Sure you can scroll to the bottom of an Element by just giving it a very large number that sure will be larger than its content height, but what I ment was to scroll to a specific position in the scrollable div, and thats what I showed. :icon_wink:

*By accident I found this thread and thought this could be interesting for someone else finding also the thread*

digital-ether 399 Nearly a Posting Virtuoso Team Colleague · Answer 8 · 2008-01-10T13:47:38+00:00

Crystal clear, but this was not what I wanted. Sure you can scroll to the bottom of an Element by just giving it a very large number that sure will be larger than its content height, but what I ment was to scroll to a specific position in the scrollable div, and thats what I showed. :icon_wink:
*By accident I found this thread and thought this could be interesting for someone else finding also the thread*

Oh I missed your point. Yes, the original post was just on how to scroll to the bottom but yours shows how to scroll to any element in a DIV. Good one.

:)

Offtopic:

Here is how you do it with mooTools. It also allows you to animate the scrolling which can be quite pleasing to look at:

new Fx.Scroll(Parent, {
		wait: false,
		duration: 500,
		transition: Fx.Transitions.Quad.easeInOut
	}).toElement(Child);

Where Parent is the Element the element with the overflow/scrollbars and child is a Child element within the scrolling element.

You could substitute child for: Parent.childNodes[[B]n[/B]] where n is the index of the childNode. (IE6 may cough on empty Text Nodes)