I was implementing a <dialog> element on a recent project, but was bothered by how the page kept scrolling in the background.
I noticed that when a <dialog> is open, the browser adds an open attribute to that element.
<dialog class="example-dialog" open>...</dialog>Knowing that, combined with the :has selector, makes this a pretty straightforward one-liner in CSS:
body:has(.example-dialog[open]) {
/* Poof! No more scrolling! */
overflow: hidden;
}A caveat here is that the <dialog> should not possibly need scrolling - that is, it should be pretty short in terms of content.
Hope that helps you!
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。