What is the relationship between html, body, and window when scrolling through code?

Question

What is the relationship between html, body, and window when scrolling through code?

I've been working on adding a scroll-to-top button to my website. After doing some research online, I came across this code snippet:

$('html, body').animate({scrollTop:0}, 'slow');

It's interesting that they are trying to scroll both the html and body elements. However, when I played around with the overflow: hidden property on the body tag, I realized that having a scrollbar for both html and body may not work as expected. Then I found an alternative method on MDN:

window.scroll({
  top: 0,
  left: 0,
  behavior: 'smooth'
});

It's worth mentioning that the window object is global and cannot be scrolled.

Does the window.scroll function internally scroll the html element or the body element?
Is it possible to scroll the body element at all? I experimented with using overflow: hidden on html and then overflow: scroll on body, but couldn't get a scrollbar to show up.

javascript html jquery css

Answer 1

Answer №1

window.scroll() is used to effectively scroll the document.scrollingElement* which is now identified as the <html> element, although it was previously the <body> element in some UAs and still in Quirks mode.

The inclusion of document.scrollingElement is a recent update, so older code may still reference both <body> and <html> to accommodate different browsers.

*_{According to specifications, it actually scrolls the "viewport", but this essentially equates to the same thing since Step 12 of the scroll algorithm designates the " document’s root element as the associated element" for the actual scrolling operation.}

const frameContent = `<html>
  <body><h1 style='height:300vh'>%s Mode</h1>
  <script>
    scroll(0, 200);
    parent.postMessage({
      compatMode: document.compatMode,
      html: document.documentElement.scrollTop,
      body: document.body.scrollTop,
    }, '*')
  <\/script>`;
document.querySelectorAll("iframe").forEach((el, i) => {
  el.src = `data:text/html,` + encodeURIComponent(
      (i ? "<!DOCTYPE html>" : "") + // set the first frame to Quirk mode
      frameContent.replace("%s", i ? "Default" : "Quirk")
    );
});
onmessage = ({data}) => console.log(data)

<iframe></iframe>
<iframe></iframe>

Answer 2

window.scroll() is used to effectively scroll the document.scrollingElement* which is now identified as the <html> element, although it was previously the <body> element in some UAs and still in Quirks mode.

The inclusion of document.scrollingElement is a recent update, so older code may still reference both <body> and <html> to accommodate different browsers.

*_{According to specifications, it actually scrolls the "viewport", but this essentially equates to the same thing since Step 12 of the scroll algorithm designates the " document’s root element as the associated element" for the actual scrolling operation.}

const frameContent = `<html>
  <body><h1 style='height:300vh'>%s Mode</h1>
  <script>
    scroll(0, 200);
    parent.postMessage({
      compatMode: document.compatMode,
      html: document.documentElement.scrollTop,
      body: document.body.scrollTop,
    }, '*')
  <\/script>`;
document.querySelectorAll("iframe").forEach((el, i) => {
  el.src = `data:text/html,` + encodeURIComponent(
      (i ? "<!DOCTYPE html>" : "") + // set the first frame to Quirk mode
      frameContent.replace("%s", i ? "Default" : "Quirk")
    );
});
onmessage = ({data}) => console.log(data)

<iframe></iframe>
<iframe></iframe>

Answer 3

Answer №2

Is the html element or body element scrolled by window.scroll?

Neither. It actually scrolls the viewport. For more details on how scrolling works, refer to the CSSOM view spec.

Can we scroll the body element at all? I tried overflow: hidden on html and then overflow: visible on body but no scrollbar appeared.

Yes, it is possible to scroll the body element, however using overflow: visible will not show a scrollbar. You need to use either overflow: scroll or overflow: auto for that. Additionally, the content within the body must exceed its boundaries in order to enable scrolling as shown below:

html {
  overflow: scroll;
  width: 630px;
}  
body { 
  height: 80px;
  overflow: auto;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This setup shows two vertical scrollbars - one on the viewport due to overflow: scroll on the html element, and another on the body because of the overflowing content with overflow: auto set.

If both elements have overflowing content, both scrollbars can be made scrollable.

html  {
  overflow: auto;
  border: 2px solid red;
}  
body { 
  height: 110vh; /* exceeds the viewport - though notice:
                    from the red and blue borders, not the
                    html element. */
  overflow: auto;
  border: 2px solid blue;
}
p { 
  height: 130vh; /* exceeds the body element */
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>

Answer 4

Is the html element or body element scrolled by window.scroll?

Neither. It actually scrolls the viewport. For more details on how scrolling works, refer to the CSSOM view spec.

Can we scroll the body element at all? I tried overflow: hidden on html and then overflow: visible on body but no scrollbar appeared.

Yes, it is possible to scroll the body element, however using overflow: visible will not show a scrollbar. You need to use either overflow: scroll or overflow: auto for that. Additionally, the content within the body must exceed its boundaries in order to enable scrolling as shown below:

html {
  overflow: scroll;
  width: 630px;
}  
body { 
  height: 80px;
  overflow: auto;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This setup shows two vertical scrollbars - one on the viewport due to overflow: scroll on the html element, and another on the body because of the overflowing content with overflow: auto set.

If both elements have overflowing content, both scrollbars can be made scrollable.

html  {
  overflow: auto;
  border: 2px solid red;
}  
body { 
  height: 110vh; /* exceeds the viewport - though notice:
                    from the red and blue borders, not the
                    html element. */
  overflow: auto;
  border: 2px solid blue;
}
p { 
  height: 130vh; /* exceeds the body element */
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>

What is the relationship between html, body, and window when scrolling through code?

Answer №1

Answer №2

Similar questions

Verify if an interval is currently active and vice versa

How come my footer is appearing at the top of my webpage?

Internet Explorer does not return results when using AJAX during the onchange event (specifically for IE only

Receive immediate updates of the text input in real-time using the onkeydown event handler in Javascript

An unexpected import token was encountered while using ReactJS and Babel

"By selecting the image, you can initiate the submission of the form

Adjust the height of a div element back to its original size using jQuery after it

What is the process for forming a series of arrays from one singular array?

AngularJS controller experiencing scope() function returning undefined issue

Strategies for improving the efficiency of HTML and styles in a generated document

Attempting to iterate through a Query each loop for the Raphael object

What is preventing me from setting a background image in Angular 13?

Encountering a Typescript error while attempting to remove an event that has a FormEvent type

Implementing jQuery Validate along with Gritter Notification

Establishing the footer within dompdf

Steps to forward a restricted user to a specific webpage

`In the event that a series of criteria is unfulfilled in a JavaScript forEach() loop`

Optimize Your Website for Various Screen Sizes

The array is giving back null values

What are the implications of incorporating listeners in redux action creators?