在Safari中禁用弹性滚动
Fab*_*geb 42 javascript css safari jquery osx-lion
我只想在Safari(OSX Lion)中调整弹性滚动/弹跳效果.
我找到了overflow: hidden在css中为body 设置的解决方案,但正如预期的那样它只会禁用滚动条,所以如果网站比屏幕"更长",你将无法滚动!
欢迎任何解决方案或提示!谢谢!
Ain*_*aer 59
您可以通过应用以下CSS更普遍地实现此目的:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
这允许您的内容,无论它是什么,都可以在其中滚动body,但请注意,scroll事件被触发的滚动上下文现在document.body不是window.
- 由于应用此CSS将消除iOS上的动态滚动,不要忘记添加** - webkit-overflow-scrolling:touch**到**body**以重新启用iOS上的动量滚动. (20认同)
- 这对我来说根本不起作用. (8认同)
- 恢复此...这似乎不适用于ios 7(chrome或safari).正文按预期滚动,但一旦在边缘html滚动似乎接管. (6认同)
- -webkit-overflow-scrolling:touch; 似乎重新启用弹性滚动.另一方面,document.body.scrollTop,window.pageYOffset和window.scrollY在使用此解决方案后不再给出页面滚动的距离值,它们保持为0.我怎样才能找到这个？ (4认同)
- 最佳解决方案https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/ (4认同)
- 这不仅适用于Safari,也适用于Chrome,也可能适用于Firefox.谢谢! (3认同)
Yis*_*ela 14
如果你overflow:hidden在<body>元素上使用hack ,为了恢复正常的滚动行为,你可以将一个<div>绝对的内部放置在元素内部以便向后滚动overflow:auto.我认为这是最好的选择,只使用css很容易实现!
或者,您可以尝试使用jQuery:
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
在javasrcipt中也是如此:
document.addEventListener(
'touchmove',
function(e) {
e.preventDefault();
},
false
);
最后一个选项,检查ipad safari:禁用滚动和弹跳效果？
- 答案有点令人费解.要定位OS X,您只需要溢出:隐藏在html和body元素上.OS X没有"touchmove"事件,这是被问到的操作系统. (4认同)
sun*_*rls 11
overflow:hidden;-webkit-overflow-scrolling:touch 在iOS safari 8.1上不能正常工作,因为固定标题将超出可见区域.
正如@Yisela所说,css应放在.container(<div>下面<body>).这似乎没问题(在Safari 8.1上的leas)
我将演示放在我的博客上:http: //tech.colla.me/en/show/disable_elastic_scroll_on_iOS_safari
Mar*_*tin 10
我在iPad上解决了它.尝试,如果它也适用于OSX.
body, html { position: fixed; }
仅当您的内容小于屏幕或使用某些布局框架(在我的情况下为Angular Material)时才有效.
在Angular Material中,您可以禁用整页的过度滚动效果,但内部部分<md-content>仍然可以滚动.
我做了一个扩展,在所有网站上禁用它.在这样做时,我使用了三种技术:纯CSS,纯JS和混合.
CSS版本与上述解决方案类似.JS有点像这样:
var scroll = function(e) {
// compute state
if (stopScrollX || stopScrollY) {
e.preventDefault(); // this one is the key
e.stopPropagation();
window.scroll(scrollToX, scrollToY);
}
}
document.addEventListener('mousewheel', scroll, false);
当一个人使用position:fixed元素并让浏览器进行滚动时,CSS工作.当一些其他JS依赖于窗口(例如事件)时,需要JS一个,这将被前一个CSS阻止(因为它使得主体滚动而不是窗口),并且通过停止边缘处的事件传播来工作,但需要合成非边缘分量的滚动; 缺点是它阻止了某些类型的滚动(那些与CSS一起工作).当滚动到达边缘(JS)时,混合方法尝试通过选择性地禁用方向性溢出(CSS)来采取混合方法,并且理论上可以在两种情况下都起作用,但是当前并不是因为它在极限处有一些余地.
因此,根据一个网站的实现,需要采取一种方法或另一种方法.
如果需要更多详细信息,请参阅此处:https://github.com/lloeki/unelastic