Html CSS:如何防止在 iOS Safari 上滚动?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/28790889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: How to prevent scrolling on iOS Safari?
提问by Henry Zhu
I created a modal. When the modal is open I'm stopping the scroll on Desktop with overflow:hidden;
to the <body>
. It's working.
我创建了一个模态。当模态打开时,我停止在桌面上滚动overflow:hidden;
到<body>
. 它正在工作。
But it's not working on my iPhone 6s Mobile Safari.
但它不适用于我的 iPhone 6s Mobile Safari。
How can I prevent scrolling when the modal is open in mobile safari?
在移动 Safari 中打开模态时如何防止滚动?
回答by matharden
Combine it with position: fixed
to do this on iOS…
将其与position: fixed
在 iOS 上执行此操作相结合……
overflow: hidden;
position: fixed;
回答by AsLittleDesign
There isn't (to my knowledge) a great way to accomplish this with CSS without repercussions on the UX.
没有(据我所知)使用 CSS 实现这一点而不会对 UX 产生影响的好方法。
While it's Javascript, and not CSS, the best way I've found to do this is the following:
虽然它是 Javascript,而不是 CSS,但我发现做到这一点的最佳方法如下:
// Disable scrolling.
document.ontouchmove = function (e) {
e.preventDefault();
}
// Enable scrolling.
document.ontouchmove = function (e) {
return true;
}