Question

我有一个网站滑块，其中每个部分的高度都为100vh。因此，每个部分都是一张幻灯片。在网站的底部，我需要有一个简单的页脚。在所有浏览器中都可以正常工作，但是在Safari中，由于过度滚动，它会出现跳跃。

Gray div是位于滑块外部的图像，并且在所有幻灯片的后面，因为我需要更改滚动条的不透明度。我的页脚也在滑块之外。

<div class="section1">SECTION 1</div>
<div class="section2">SECTION 2</div>
<div class="section3">
  SECTION 3
</div>
<div class="bg" style="background: gray"></div>
<footer>FOOTER HERE</footer>

CSS

  * {
      margin: 0;
      padding: 0;
    }

    .section3,
    .section2,
    .section1 {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: relative;
      z-index: 2;
      background: #000;
      color: white;
      margin-top: 15%;
    }

    .section3 {
      background: transparent;
      margin-top: 0;
      z-index: 10;
    }

    .bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(bf34577….png);
      background-repeat: no-repeat;
      background-size: cover;
    }

    footer {
      display: flex;
      position: absolute;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 0 10px;
      z-index: 9;
      width: 100vw;
      height: 65px;
      object-fit: cover;
      background: #000;
      color: #727272;
    }

因此，当发生过度滚动时，页脚会跳到后面，您会看到不应该发生的图像。

如果我提供页脚position: fixed和bottom: 0可以固定，但是我不需要将其设为position: fixed，我只需要将其放在页面底部即可。

在这种情况下，如何停止Safari中的过度滚动？

0 个答案: