时间戳

首页 > 解决方案 > 防止 Safari iPad 上的弹性滚动

css - 防止 Safari iPad 上的弹性滚动

问题描述

我已经实现了以下代码，以防止屏幕让用户在使用 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;
  }

标签： cssipadsafari

解决方案

我在尝试在 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;
}

Position 正在使用bourbon，如果您不使用 bourbon，您可以正常写位置。

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

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

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

推荐阅读