CODEWITHSUNDEEP
javascriptdomscroll
Jan Turoň
Jan Turoň

Reputation: 32922

How does browser scrolling work in DOM?

Originally I was googling the difference between window.scrollTo(0,y) and element.scrollTop=y.

On which element is window.scrollTo applied? Obviously it is not the window itself what is scrolled, but its contents. Intuitively it should be the body (documentElement), but I haven't found any standard about that.

Perharps this one writes about viewports, so the question could be reduced if there is any identity between window viewport and some element, but viewports are unaware of their contents. In the reference I got lost among terms like defaultView or browsing context... Please help me understand what is going on in the DOM during scrolling and how the scrollTo window method and scrollTop documentElement property are interconnected.

Upvotes: 4

Views: 2680

Answers (2)

BSMP
BSMP

Reputation: 4807

On which element is window.scrollTo applied?...Intuitively it should be the body (documentElement), but I haven't found any standard about that.

I think what you're looking for is this information on the body element:

The body element exposes as event handler content attributes a number of the event handlers of the Window object. It also mirrors their event handler IDL attributes.

The onblur, onerror, onfocus, onload, onresize, and onscroll event handlers of the Window object, exposed on the body element, replace the generic event handlers with the same names normally supported by HTML elements.

As for scrollTop, from Professional JavaScript for Web Developers by Nicholas C. Zakas:

scrollTop — The number of pixels that are hidden in the top of the content area. This property can be set to change the scroll position of the element.

So scrollTop is a measure of how much an element (like a div) has been scrolled down.

Some definitions from W3C's HTML5 Specification

The window object has:

The document has:

  • a WindowProxy attribute called defaultView
  • The HTMLElement body
  • The HTMLHeadElement head
  • HTMLCollections of the images, scripts, links, etc.

The defaultView IDL attribute of the Document interface must return the Document's browsing context's WindowProxy object, if there is one, or null otherwise.

A browsing context is an environment in which Document objects are presented to the user....At any time, one Document in each browsing context is designated the active document. A Document's browsing context is that browsing context whose session history contains the Document, if any. (A Document created using an API such as createDocument() has no browsing context.)

Each Document in a browsing context is associated with a Window object. A browsing context's WindowProxy object forwards everything to the browsing context's active document's Window object.

Upvotes: 3

pesla
pesla

Reputation: 1254

Well, I guess in the end this all comes down to terminology.

The window object represents a window containing a DOM document. The document property of a window points to the DOM document loaded in that window. An element represents an object of a document.

Another concept is the viewport. The function of the viewport is to constrain the <html> element, which is the uppermost containing block of your site. It isn't an actual html element; it just sits there between the root of your document and the window, for various reasons. People usually refer to it as the visible part of the page in your browser.

These concepts are great to introduce, but the most important one in this context is a scrolling box.

Every element that has content overflowing its content area has an associated scrolling box if the element’s used value of the overflow-x or overflow-y properties is not visible.

So, whenever a user (or a script) scrolls, it affects an elements scrolling box. window.scrollTo affects the scrolling box of the documents root node, the uppermost containing block: the html element. It's not something you see, as it just changes what you see in the viewport and seems to be an interaction with the window. Hence people call it "scrolling the window", or "scrolling the document".

There is an exception. IE in compatibility mode uses the body element as a base for rendering and measuring offsets. This makes it less straight forward to work with scroll positions and was a reason for many developers to rely on libraries to get the right values.

Upvotes: 5

Related Questions