如何阻止浏览器超出滚动的弹跳效果

最近做Tauri,发现Tauri虽然少了Chromium大大缩小了安装包的大小,但是用操作系统内本地的浏览器做WebView实在是太不靠谱了,Mac电脑上的Safari简直就是一个大毒瘤,为了搞这个适配问题,感觉回到了兼容IE时代,Tauri的开发者拜托至少给个Chromium的选项别一刀切,比起适配如此痛苦,我真不在乎那几十兆的浏览器。

原文:https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/

目的:禁止浏览器超出部分滚动的弹跳效果

除Safari以外的浏览器:

html, body {
  overscroll-behavior-y: none;
}

Safari:

html,
body {
  position: fixed;
  overflow: hidden;
}

body > .mainwrapper {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* enables “momentum” (smooth) scrolling */
}
<html>
…
<body>
  <div class="mainwrapper">
    …
  </div>
</body>
</html>

据该博客的2021年补充说,因为bug上面的方法在ios12里也不支持,我没有测试,但至少在Tauri的浏览器里可以,而且无需加上 mainwrapper等。

发表回复