Discovery
As I delved into the intricacies of web development, I stumbled upon a curious observation. In a particular MDN page, I noticed that the left and right sidebars had their scrollbars contained within themselves. However, the content block's scrollbar extended to the global context.
https://i.stack.imgur.com/FXJ7L.gif
Upon inspecting the DOM tree, I realized that neither the body nor the html tags had a defined height property. Consequently, there were no elements with fixed heights serving as scrollable containers between the content area and the topmost window object.
An illustration of a scrollable container
Dilemma
This setup essentially made the window the overflow container for the content area. To verify this hypothesis, I added scroll event listeners to both the window and document.body. Surprisingly, only the window event was triggered.
window.addEventListener("scroll", (e) => console.log("window scrolling"))
document.body.addEventListener("scroll", (e) => console.log("body scrolling"))
Discontent with this configuration, I desired the scroll context to be document.body instead of window, thereby ensuring that the scroll event originated from the body tag rather than the window.
Attempts
In an attempt to rectify the situation, I assigned a height property to the body tag.
height: 100vh
Subsequently, I reattached the scroll event listener to it. Unfortunately, the event failed to trigger, leaving me perplexed about the underlying cause.
The conventional wisdom dictates that adding a height property to a parent element with a value lower than its children should render it scrollable. So, where did my logic falter?
I might be overlooking some fundamental aspect, but I remain clueless. Your guidance on this issue would be immensely appreciated. Thank you!
References: