set scroll to the bottom of a div

[westman]

I have many lines of text.

<div style="max-height:400px; overflow:scroll;">
many lines of text
</div>

How do I get my css to display a div at the bottom instead of the top of a scrollable div? 

[Ingolme]

CSS can't do it, you will need to use Javascript to set the scrollTop property.

[westman]

I tried using

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

but with no luck

[dsonesuk]

If this code is below the element in question with exact ID value of 'mail_text', it should work.

Unless you are using a older IE "wish I worked as good as the other better browser's, but i know that will never happen" version, which used .pageYOffset

Edited April 3, 2018 by dsonesuk

[westman]

<div id="mail_text" class="mail_text" style="max-height:400px; overflow:auto;">
&nbsp;
</div>
<script type="text/javascript">
var objDiv = document.getElementById("mail_text");
objDiv.scrollTop = objDiv.scrollHeight;
</script>

I am using Chrome.
Is there a better peace to put my JS?
My example is not working. 

Edited April 3, 2018 by westman

[dsonesuk]

So are you saying this does NOT work and you don't always see 'THE END', when page is fully loaded?

https://www.w3schools.com/code/tryit.asp?filename=FQ17TS976APD

Edited April 3, 2018 by dsonesuk

[westman]

It works nicely in the link you posted but not for me.
I am also using this script to call in info to fill class="mail_text".

$( document ).ready(function() {
    $('.pmbutton').click(function(e) {
	$('.mail_text').load('scripts/message.php', { id : $(this).data('id'),id2 : $(this).data('id2') });
});
});

Could I somehow insert the code needed in here?

[dsonesuk]

Just to make it clear to some of those watching! This has everything to do with the code.

        <script>
            $(document).ready(function() {
                $('.pmbutton').click(function(e) {
                    $('.mail_text').load('scripts/message.php', {id: $(this).data('id'), id2: $(this).data('id2')},
                    function() {
                        var objDiv = document.getElementById("mail_text");
                        objDiv.scrollTop = objDiv.scrollHeight;

                    });
                });
            });

        </script>

 

Edited April 4, 2018 by dsonesuk

[westman]

Thank you so much.
I tried it and it works very well.

[dsonesuk]

To make it clear on what is happening, the function within the load() is triggered after the content is loaded and load() function finished. That is why you didn't see the result you expected, the load() function was still in progress, when the scroll to top code was triggered.