Scrolling Overflowed DIVs with JavaScript

by

scrollHeight should be the total height of content. scrollTop specifies the pixel offset into that content to be displayed at the top of the element’s client area.

So you really want (still using jQuery):

$("#thediv").each( function() 
{
   // certain browsers have a bug such that scrollHeight is too small
   // when content does not fill the client area of the element
   var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
   this.scrollTop = scrollHeight - this.clientHeight;
});

…which will set the scroll offset to the last clientHeight worth of content.

More Related Contents:

  1. How to make page loaders/animations/transitions
  2. Scroll Function working in reverse order [closed]
  3. How to send FormData objects with Ajax-requests in jQuery? [duplicate]
  4. How to scroll an HTML page to a given anchor
  5. jQuery load more data on scroll
  6. Refresh/reload the content in Div using jquery/ajax
  7. Set timeout for ajax (jQuery)
  8. Trigger event when user scroll to specific element – with jQuery
  9. Using HTML5 file uploads with AJAX and jQuery
  10. Keep overflow div scrolled to bottom unless user scrolls up
  11. Prevent Page Load on Jquery Form Submit with None Display Button
  12. How to scroll to top of page with JavaScript/jQuery?
  13. “Mixed content blocked” when running an HTTP AJAX operation in an HTTPS page
  14. How to bind Events on Ajax loaded Content?
  15. jquery submit form and then show results in an existing div
  16. How to do a horizontal scroll on mouse wheel scroll?
  17. How to load images dynamically (or lazily) when users scrolls them into view
  18. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  19. How do I abort image load requests without using window.stop()
  20. how to assign javascript variable value to php variable
  21. How to replace html element with ajax response?
  22. How can I get all a form’s values that would be submitted without submitting [duplicate]
  23. When loading an html page via ajax, will script tags be loaded?
  24. how to use jQuery ajax calls with node.js
  25. jQuery DataTables “No Data Available in Table”
  26. Twitter-style autocomplete in textarea
  27. Load ajax when scroll reaches 80%
  28. jquery ajax parse response text
  29. Parsing returned HTML from jQuery AJAX request
  30. How to replace the entire html webpage with ajax response?

Leave a Comment