bydefault scroll to the bottom of a div in Firefox browser

Question

I used

var items = document.getElementById('messageBody');
items.scrollTo(0, document.getElementById('messageBody').scrollHeight);

where, 'messageBody' is the id of the div with height 400px and vertical scroll in it. This seems to be working fine in Chrome browser but its not working in Firefox. Can someone help me with a fix for this issue in Firefox browser?

Searching your title I found this: https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div — mplungjan, Sep 24 '20 at 07:19
found this setTimeout(() => { var objDiv = document.getElementById('div_id'); objDiv.scrollTop = objDiv.scrollHeight }, 0). This worked in Chrome and Firefox — Ramya, Sep 24 '20 at 07:51

score 0 · Answer 1 · answered Sep 24 '20 at 07:21

0

Try this:

var items = document.getElementById('messageBody');
items.scrollTop = items.scrollHeight;

answered Sep 24 '20 at 07:21

JKD

1,279
1
6
26

1

That is what I already posted in the comment and in my answer – mplungjan Sep 24 '20 at 07:24
Yes, this doesn't work for Firefox – Ramya Sep 24 '20 at 07:28
1

@mplungjan yeah, I also just tried some different solutions, but they all somehow don't work in Firefox... – JKD Sep 24 '20 at 07:29
It does. I just tested - see my answers – mplungjan Sep 24 '20 at 07:29
1

@mplungjan great job, I upvoted! – JKD Sep 24 '20 at 07:33

mplungjan · Answer 2 · 2020-09-24T07:37:02.920

From Scroll to bottom of div?

Works in Chrome 84 AND Firefox 80 AND 81

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

#scroll {
  height: 400px;
  overflow: scroll;
}

<div id="scroll">
  <div style="height:200px; background-color:red;">DIV 1</div>
  <div style="height:200px; background-color:blue;">DIV 2</div>
  <div style="height:20px; background-color:yellow;">DIV 3</div>
</div>

ALSO Works in Chrome 84 AND Firefox 80 AND 81

var objDiv = document.getElementById("scroll");
objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;

#scroll {
  height: 400px;
  overflow: scroll;
}

<div id="scroll">
  <div style="height:200px; background-color:red;">DIV 1</div>
  <div style="height:2000px; background-color:blue;">DIV 2</div>
  <div style="height:20px; background-color:yellow;">DIV 3</div>
</div>

bydefault scroll to the bottom of a div in Firefox browser

2 Answers2