0

我正在尝试使用 CSS scroll-snap 使我的网站的用户体验更加愉快。虽然预期的滚动效果有效，但我的页脚在站点内的每个内容“页面”上都可见。这是基本结构：

<div class="main-scroll-container">
    <div id="main-news">
    </div>
    <div id="main-footer">
    </div>
</div>
<footer class="footer">
    [...]
<footer>

CSS：

.main-scroll-container {
    overflow: auto;
    width: 100%;
    height: 100vh;
    scroll-snap-type: y mandatory;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
}

#main-news {
    height: 100vh;
    width: 100%;
    background-color: [...]
    scroll-snap-align: start;
}

#main-footer {
    height: 100vh;
    width: 100%;
    background-color: [...]
    
    scroll-snap-align: start;
}

我打算让滚动捕捉效果允许在代表页面底部的位置main-news和main-footer位置之间进行平滑更改。main-footer在这部分中，我希望在底部有一个固定的页脚。我尝试了这两种方法position: absolute以及position: relative将bottom:0页脚放入其中，main-footer但页脚仍然出现在上 div 的底部main-news。我真的很感激每一个帮助。

4

1 回答 1

-1

我自己也遇到过类似的问题，就我而言，我有几个section's 并且我希望 afooter出现在最后一部分之后。我最终做的是创建id一个有用的名称并计算出来的height: calc(100vh - 64px);. The64px是 my 的高度footer，因此当它id应用于您的元素时，footer代码中紧随其后的 the 现在看起来好像它是 last 的一部分section。希望这可以帮助！

HTML

<div class="container">
  <section>
    // irrelevant content here
  </section>

  <section id="hack-around">
    // irrelevant content here
  </section>

  <footer></footer>
</div>

CSS

#hack-around {
  // 100vh - the height of the footer
  height: calc(100vh - 64px);
}

section {
  display: flex;
  scroll-snap-align: start;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.container {
    width: 100vw;
    height: 100vh;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
}
于 2021-06-20T09:03:06.760 回答