防止滚动的措施_防止身体滚动

最新推荐文章于 2024-09-27 11:27:10 发布

culuo8053

最新推荐文章于 2024-09-27 11:27:10 发布

阅读量435

点赞数

文章标签： java css html jquery js ViewUI

原文链接：https://davidwalsh.name/prevent-body-scrolling

版权

防止滚动的措施

One of my pet peeves with fixed or absolute positioned elements is the <body> scrolling while you scroll the the positioned element. Have you ever tried scrolling a dialog and seeing the page scroll in the background? Awful user experience, bordering on embarrassing. Yikes.

滚动固定元素或绝对定位元素时，我的其中之一是<body>滚动。您是否曾经尝试过滚动对话框并在后台看到页面滚动？糟糕的用户体验，令人尴尬。 kes

So what's the best way to prevent the <body> scrolling in the background? Pass on scroll events and preventDefault or stopPropagation, that wont work. The easiest way is a simple CSS snippet:

那么，防止<body>在后台滚动的最佳方法是什么？传递scroll事件和preventDefault或stopPropagation ，它们将无法工作。最简单的方法是简单CSS代码段：


body.noScroll { /* ...or body.dialogShowing */
  overflow: hidden;
}

Preventing overflow on the entire <body> assures scrolling on elements other than the desired fixed or absolute element wont happen. It's an easy way to freeze the page for a hovered focus element.

防止整个<body>上的溢出，可以确保不会滚动除所需的固定或绝对元素之外的其他元素。这是冻结页面的焦点元素的简单方法。

This trick has been used forever -- make sure you keep it in your toolbox!

该技巧已被永远使用-确保将其保存在工具箱中！