Question

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

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

代码似乎运行良好，但是现在页面底部的页脚已被切断，这似乎只是IOS野生动物园的一个问题。我希望页脚保持在页面底部，而不会被截断。我已经看到了使用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;
  }

Answer 1

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

我找不到一站式CSS或JS来解决此问题。当您不想从野生动物园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>

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

防止在Safari iPad上进行弹性滚动

1 个答案: