防止 Safari iPad 上的弹性滚动答案

【问题标题】：Prevent elastic scroll on Safari iPad防止 Safari iPad 上的弹性滚动
【发布时间】：2019-04-01 15:15:49
【问题描述】：

我已经实现了以下代码，防止屏幕让用户在使用ipad时看到网站的弹性溢出。

.main-layout::ng-deep {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  //overflow: hidden;
}

代码似乎运行良好，但现在页面底部的页脚被截断，这似乎只是 IOS safari 上的问题。我希望页脚保留在页面底部而不会被截断。我已经看到了使用 JavaScript 的解决方案，但理想情况下我只想使用 CSS。

所以我在防止弹性滚动的地方进行了修复。但是页脚被截断，用户无法向下滚动查看。

这是页脚的 CSS

.footer {
    @media (max-width: $screen-sm-max) {
      font-size: 12px;
    }
    @media (max-width: $screen-sm-min) {
      font-size: 10px;
    }
    @extend .center;
    height: $header-height;
    text-align: center;
    width: 100%;
    background-color: $gray-ltr;
    font-size: 14px;
    overflow: auto;
    border-top: 2px solid $gray-lt;
  }

【问题讨论】：

标签： css ipad safari

【解决方案1】：

我在尝试在 iPhone 上为 iOS 制作 Web 应用程序时遇到了类似的问题。不确定它是否会在 iPad 上为您提供帮助，但值得一试。

我找不到任何一站式的 CSS 或 JS 来解决这个问题。当您不想从 safari iOS 浏览器顶部拉下任何多余的白色时，这令人沮丧。

我使用的可能对您有所帮助的工作是使用 CSS 来实现这一点......

HTML,
BODY {
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  @include position(fixed, 0 0 0 0);
}

.webapp-container {
  @include position(absolute, 0 0 0 0);
  overflow: scroll;
}

位置使用bourbon，如果你不使用波旁威士忌，你可以正常写位置。

使用 HTML 添加一个额外的 div...

<body>
  <div class="webapp-container">
    New body content with no elastic scrolling
  </div>
</body>

您的页脚似乎没有任何固定位置，因此您在此方法中的原始代码不应该有任何问题。

【讨论】：