英文:
Is it possible to set the context of scroll event to `document.body` instead of `window`?
问题
背景
在阅读mdn页面时，我注意到左右侧边栏的滚动条嵌套在自身内部。但内容区块的滚动条在全局上下文中。
当我检查DOM树时，我看到body和html标签上没有定义高度属性。因此，实质上，在内容区域和最顶层窗口对象之间没有具有固定高度（可滚动容器）的元素。
滚动容器的示例
问题
这使得window成为内容区域的溢出容器。
进一步证实这一点，我为window和document.body都添加了scroll事件监听器，结果只有window事件被触发
window.addEventListener("scroll",(e)=>console.log("window scrolling"))
document.body.addEventListener("scroll",(e)=>console.log("body scrolling"))
但我希望滚动的上下文不是window，而是document.body。而且应该从body标签触发滚动事件，而不是窗口。
我做了什么
然后我为body标签添加了height属性。
height: 100vh
然后再次为其添加了滚动事件监听器。但是它没有触发，我不明白为什么？
为具有小于其子元素值的父元素添加height属性应该使其可滚动，对吧？
我可能漏掉了一些基本的东西，但不知道是什么？
请帮忙，谢谢！
参考-
英文:
Backdrop
While I was reading mdn page, I noticed that the left and right sidebars have their scrollbars contained within themselves. But the content area block has its scrollbar in the global context.
When I inspected the DOM tree, I saw that the body and html tags doesn't have height property defined on them. So essentially, their were no elements with fixed height (scrollable container) between the content area and the topmost window object.
An example of scrollable container
Problem
So this makes window the overflow container for the content area.
Further confirming this, I added scroll event listeners to both window and document.body and it turns out that only window event is fired
window.addEventListener("scroll",(e)=>console.log("window scrolling"))
document.body.addEventListener("scroll",(e)=>console.log("bodyy scrolling"))
But I want the context for scroll should not be window but document.body. And that should fire scroll event from body tag and not window.
What I did
I then added height property to the body tag.
height: 100vh
and then added scroll event listener to it again. But It didn't fired, and I am not able to understand why it didn't?
Adding a height property to a parent which has a value less than its children should make it scrollable right?
I might be missing something fundamental but don't know what?
Please help, Thanks!
ref-
答案1
得分: 3
确保在<body>和<html>元素上将overflow属性设置为除了visible之外的其他值，因为涉及Overflow Viewport Propagation。
要出现滚动条，<body>的高度必须额外小于其包含的内容的高度：
window.addEventListener("scroll", () => console.log("window scrolled"));
document.body.addEventListener("scroll", () => console.log("body scrolled"));
html {overflow-y: hidden}
body {
margin: 0;
height: 100dvh;
overflow-y: scroll;
}
main {
height: 200%;
background-color: red;
}
<body>
<main></main>
</body>
英文:
Make sure to set the overflow property on the <body>, and on the <html> element to something other than visible because of Overflow Viewport Propagation.
For a scrollbar to appear, <body>'s height must additionally be less than the content's it contains:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
window.addEventListener("scroll", () => console.log("window scrolled"));
document.body.addEventListener("scroll", () => console.log("body scrolled"));
<!-- language: lang-css -->
html {overflow-y: hidden}
body {
margin: 0;
height: 100dvh;
overflow-y: scroll;
}
main {
height: 200%;
background-color: red;
}
<!-- language: lang-html -->
<body>
<main></main>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论