Summary (^) ❘ 277
Scrolling a container to its bottom rightmost content can be accomplished by calculating values
larger than the maximum possible values or by simply using a value suffi ciently large to be
reasonably sure of exceeding the maximum but suffi ciently small to be valid. Both approaches are
demonstrated in the following lines:
$('div#aScrollableElement').scrollTop($('div#aScrollableElement')
.prop('scrollHeight')).scrollLeft($('div#aScrollableElement')
.prop('scrollWidth'));
$('div#aScrollableElement').scrollTop(999999999).scrollLeft(999999999);
Although the last approach might leave you scratching your head, it is technically more effi cient
than selecting elements from the DOM and reading their properties.
Summary
In this chapter, you learned how to retrieve and update the scrollbar positions of scrollable content.
Throughout this chapter, you worked on building a page to display the current scroll positions as
content was scrolled, discovering in the process the event handler you can specify to execute code
during a scrolling operation. You extended the page to set the scroll positions based on elements
within the scrollable content.Finally, you learned how to scroll a container to the limits of its content, including the most com-
mon case of scrolling to the top, and you became acquainted with some of the nuances of jQuery’s
scrollTop() and scrollLeft() methods for values outside the expected ranges.EXERCISES
- If you want to retrieve the current scrollbar positions for a scrollable element, which jQuery
functions would you use?
- If you want to scroll the top of a particular element into view within its scrollable container,
which three coordinates are needed?
- Write the function call that you would use to scroll a scrollable element to its top.
- Describe two general approaches to scroll a scrollable element to its bottom.
- If an invalid value is specifi ed when setting scrollTop() or scrollLeft() , what value is used by
the function?