小编典典

在不禁用滚动功能的情况下防止iOS弹跳

css

我正在尝试实现一种解决方案,以防止当网页内容大于视口时,iOS Safari中的iOS反弹效果。

我正在处理的页面的结构非常具体,与该页面非常相似

  • 基本结构是基于引导的。
  • 它的顶部有一个固定的导航栏。
  • 它具有全屏背景幻灯片播放。
  • 幻灯片的覆盖层固定在视口的底部。
  • 有一个页脚元素,可以加载画布,并且仅在滚动内容时可见。
  • 内容在导航栏后面滚动。
  • 内容由位于导航栏下方20px的标题和位于视口上方20px的一系列按钮组成。
  • 滚动时,按钮和标题都将在屏幕上移动以显示页脚。

我遇到的问题与页面上的问题相同,因为向上滚动时,屏幕底部会出现反弹效果,并显示背景和覆盖。

我尝试了各种解决方案,包括iNoBounce.js,Nonbounce.js以及我在SO上找到的其他一些建议。

我总是遇到相同的问题…当我尝试禁用弹跳时,所有滚动都被禁用。我猜这是因为内容(除页脚之外)总是足够大而无需滚动,因此滚动被禁用并且页脚不再可在滚动上访问。


阅读 314

收藏
2020-05-16

共1个答案

小编典典

此代码应停止反弹,因为反弹的是HTML标签

html {
    height  : 100%;
    overflow: hidden;
    position: relative;
}
body {
    height  : 100%;
    overflow: auto;
    position: relative;
}
2020-05-16