时间戳

首页 > 解决方案 > 为什么我的简单 CSS 滚动捕捉不起作用？

css - 为什么我的简单 CSS 滚动捕捉不起作用？

问题描述

我尝试使用滚动捕捉功能，但它不起作用。我很困惑 - 我做错了什么？

HTML：

<!doctype html>
<html>
<body>

    <div class="section" style="background-color: peachpuff">
        <h2>Headline</h2>
        <p>My Text</p>
    </div>

    <div class="section">
        <h2>another Headline</h2>
        <p>Another line of text</p>
    </div>

    <div class="section" style="background-color: peachpuff">
        <h2>next Headline</h2>
        <p>Text line - lorem ipsum and stuff</p>
    </div>

    <div class="section">
        <h1>THE END OF THE SCROLL</h1>
    </div>

</body>
</html>

CSS：

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 80%;
    margin: auto;
    scroll-snap-type: y mandatory;
}

h1, h2{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', Arial, sans-serif;
}
.section{
    display: flex;
    flex-direction: column;
    width:100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

https://codepen.io/Shampie/pen/vYOrOEW

提前致谢！

（首先代码不够，现在代码太多，我需要更多文字......我不知道还能说什么）

标签： cssscroll-snapscroll-snap-type

解决方案

scroll-snap-type 在分配给 body 元素时似乎不起作用。您可以通过将其分配给 html 标记来修复它：

html {
  scroll-snap-type: y mandatory;
}
body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 80%;
    margin: auto; 
}

但是有一个问题：这曾经可以正常工作，但是自从最近更新到版本 81 以来，它在 Chrome 中的行为很奇怪（对我来说，问题从昨天开始）。

另一种方法是将所有内容包装在容器元素中并为其分配 scroll-snap-type ：

.body {
    margin: 0; /* prevents a double scroll bar */
}
.scrollsnap-container {
    max-height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: mandatory; /* for older browsers */
    scroll-snap-points-y: repeat(100vh); /* for older browsers */
    scroll-snap-type: y mandatory;
  }
  .scrollsnap-section {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
  }

<div class="scrollsnap-container">
    <section id="slide-1" class="scrollsnap-section">
      <h2>slide 1</h2>
    </section>
    <section id="slide-2" class="scrollsnap-section">
      <h2>slide 2</h2>
    </section>
    <section id="slide-3" class="scrollsnap-section">
      <h2>slide 3</h2>
    </section>
    <section id="slide-4" class="scrollsnap-section">
      <h2>slide 4</h2>
    </section>
    <section id="slide-5" class="scrollsnap-section">
      <h2>slide 5</h2>
    </section>
  </div>

这似乎对我更有效。

推荐阅读