westman Posted April 1, 2018 Share Posted April 1, 2018 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? Link to comment Share on other sites More sharing options...
Ingolme Posted April 2, 2018 Share Posted April 2, 2018 CSS can't do it, you will need to use Javascript to set the scrollTop property. Link to comment Share on other sites More sharing options...
westman Posted April 3, 2018 Author Share Posted April 3, 2018 I tried using var objDiv = document.getElementById("mail_text"); objDiv.scrollTop = objDiv.scrollHeight; but with no luck Link to comment Share on other sites More sharing options...
dsonesuk Posted April 3, 2018 Share Posted April 3, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
westman Posted April 3, 2018 Author Share Posted April 3, 2018 (edited) <div id="mail_text" class="mail_text" style="max-height:400px; overflow:auto;"> </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 Link to comment Share on other sites More sharing options...
dsonesuk Posted April 3, 2018 Share Posted April 3, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
westman Posted April 4, 2018 Author Share Posted April 4, 2018 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 4, 2018 Share Posted April 4, 2018 (edited) 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 1 Link to comment Share on other sites More sharing options...
westman Posted April 4, 2018 Author Share Posted April 4, 2018 Thank you so much. I tried it and it works very well. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 4, 2018 Share Posted April 4, 2018 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now