Overflow-y, how to start at lowest part of the

Question

I have got a div with Overflow-y. When the text becomes to large it is possible to scroll to the bottom half of the text.

My question is: How do I let it start at the bottom half of the div and not at the top half? So that you will view the bottom half of the text first.

This is the CSS used for the div.

#Middle{
margin: 0px;
padding: 0px;
width: 234px;
height: 287px;
margin-left: auto;
margin-right: auto;
margin-top: 7px;
padding: 5px;
background-color: #F0F0F0;
overflow-y: scroll;
resize: none;
box-shadow:inset 0 0 5px #000000;
-moz-box-shadow:inset 0 0 5px #000000;
-webkit-box-shadow:0 0 5px #000000;
}

I just add this right? Because it won't work. (sorry I'm not experienced with JavaScript yet)

<head><script>
var div = document.getElementById("Middle");
div.scrollTop = div.scrollHeight;
</script></head>

You'll need to use JavaScript to scroll the content to the bottom. Can we see your markup? — BoltClock, Jan 10 '13 at 16:11

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

apparently there is a question same as yours with an accepted answer.

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

edited May 23 '17 at 11:43

Community

1
1

answered Jan 10 '13 at 16:17

Dan Ovidiu Boncut

3,083
4
25
45

score 0 · Answer 2 · answered Jan 10 '13 at 16:17

0

This usually works:

var div = document.getElementById("ID");
div.scrollTop = div.scrollHeight;

answered Jan 10 '13 at 16:17

Mykola Matkovski

46
4

score 0 · Answer 3 · answered Feb 07 '20 at 08:32

Your solution should work, you just need to put it on the end of the page so when you call document.getElementById the element already exists on the DOM.

Here is an working example:

<body>
  <div id="Middle">
    <!-- some long content -->
  </div>

  <script>
    var div = document.getElementById("Middle");
    div.scrollTop = div.scrollHeight;
  </script>
</body>

Overflow-y, how to start at lowest part of the

3 Answers3