Window Sizes / Scrolling / Resizing
Browser Document: Window Sizes / Scrolling
How do we find the width and height of the browser window?
Interview Response: To extact the window width and height, we can use the clientWidth/clientHeight of document.documentElement. Using this approach is the correct way to extract the width and height of the window, not window.innerWidth/innerHeight.
// full window width
// window width minus the scrollbar
Why shouldn't we use innerWidth/innerHeight to retrieve the window's width and height?
Interview Response: Browsers also support properties like window.innerWidth/innerHeight. They look like what we want, but they are not. If a scrollbar exists and takes up some space, clientWidth/clientHeight delivers the width/height without it (subtracts it). In other words, they return the width and height of the visible portion of the page that is accessible for content. The window.innerWidth/innerHeight properties include the scrollbar in their computation. Most of the time, we require the available window width. We should utilize documentElement.clientHeight/clientWidth to draw or place things within the scrollbar (if any).
// full window width
alert(window.innerWidth); // includes the scrollbar size in the return value
// window width minus the scrollbar
Is there a reason that we should always use
<!DOCTYPE HTML> in our HTML, when using geometry properties?
Interview Response: When there is no ‹!DOCTYPE HTML› in HTML, top-level geometric properties may behave outside their intended behavior. Strange things are possible. We should alwaYs use !DOCTYPE HTML in modern web application development.
How do we extract the entire width and height of the document, including the scrolled-out part?
Interview Response: Theoretically, because the root document element document.documentElement and it encloses all of the information, we could measure the total size of the document as document.documentElement.scrollWidth/scrollHeight. However, these attributes do not operate as intended on that element throughout the entire page. If there is no scroll in Chrome/Safari/Opera, documentElement.scrollHeight may be smaller than documentElement.clientHeight! Isn't it strange? To acquire the complete document height with confidence, we should take the greatest of these properties.
let scrollHeight = Math.max(
alert('Full document height, with scrolled out part: ' + scrollHeight);
How do we access the current scroll position top/left of the document?
Interview Response: The current scroll is available in the special properties, window.pageXOffset/pageYOffset, which are read-only. This state ensures that we extract the current scroll state in all browsers.
Technical Response: DOM elements' scrollLeft/scrollTop attributes contain the current scroll state. document.documentElement is used for document scrolling. Most browsers support scrollLeft/scrollTop, except older WebKit-based browsers like Safari (bug 5991), where we need to use document.body instead of document.documentElement. Fortunately, we don't have to remember these quirks because the scroll gets provided in the read-only special properties window.pageXOffset/pageYOffset.
alert('Current scroll from the top: ' + window.pageYOffset);
alert('Current scroll from the left: ' + window.pageXOffset);
What happens if we try to scroll the document when the DOM does is not fully constructed?
Interview Response: If we try to scroll the page with a script in ‹head›, it fails because the DOM is not fully built. It is common to place these scripts at the bottom of the document or in a deferred script.
<p>...content before script...</p>
<!-- visible immediately -->
<p>...content after script...</p>
Interview Response: The simplest solution is to use the special methods window.scrollBy(x,y) and window.scrollTo(pageX,pageY). These methods function in the same way for all browsers.
Technical Response: Regular items can be scrolled by adjusting the scrollTop/scrollLeft values. We implement this for the page by using document.documentElement.scrollTop/scrollLeft (except in Safari, where we should use document.body.scrollTop/Left instead). Another option is to use the specific methods window.scrollBy(x,y) and window.scrollTo(x,y) (pageX,pageY). These approaches function in the same way for all browsers.
Can you explain the function and syntax of the scrollBy method?
Interview Response: The scrollBy(x,y) method scrolls the page related to its current location. ScrollBy(0,10), for example, scrolls the page 10px down. It uses two non-optional parameters, including the x and y coordinates. An additional parameter option, ScrollToOptions, accesses left, top, and behavior properties in a dictionary object.
window.scrollBy(x - coord, y - coord);
// To scroll down one page:
// Using scrollBy Options object
Can you explain the function and syntax of the scrollTo method?
Interview Response: The scrollTo(pageX,pageY) method scrolls the page to absolute coordinates, such that the top-left corner of the viewable area has coordinates (pageX, pageY) relative to the top-left corner of the document.
window.scrollTo(x - coord, y - coord);
// Using scrollTo Options object
It is like setting scrollLeft/scrollTop. To scroll to the beginning, we can use scrollTo(0,0). These methods function in the same way for all browsers. Window.scrollTo() moves the cursor to a specific set of coordinates in the document. The scrollTo() method of the element interface scrolls to a particular set of coordinates inside a given element.
Can you explain the function and syntax of the scrollIntoView method?
Interview Response: The call to elem. scrollIntoView(top) scrolls the page to reveal elem. There is just one boolean parameter. If top=true (that is the default), the page scrolls to make elem appear on the top of the window. The upper edge of the element aligns with the window top. If top=false, the page scrolls to make elem appear at the bottom. The bottom edge of the element aligns with the window bottom.
Interview Response: It’s enough to set document.body.style.overflow = "hidden" to make the document un-scrollable. The page will "freeze" when it is currently scrolling. The same technique stops the scroll for additional components, not just for document.body. The disadvantage of this strategy is that the scrollbar vanishes, impacting the presentation of the document.
// Freeze the page
document.body.style.overflow = 'hidden';
// Unfreeze the page
document.body.style.overflow = '';
If it occupied some space, that space is now free, and the content “jumps” to fill it. That looks odd, but if we compare clientWidth before and after the freeze, there is a workaround. If it increased (the scrollbar disappeared), add padding to document.body in place of the scrollbar to keep the content width the same.