Question

我知道之前可能已经回答过这个问题，但是我一直在寻找 4 个小时，但找不到有效的答案。抱歉，如果这是多余的。

我正在尝试创建一个网站，其中页面被分成多个 div，每个 div 具有一个完整页面的高度和宽度。我想使用 CSS 滚动捕捉一次加载一个整页的 div。我使用的是 wordpress 主题，因此我无法直接访问总体 div 布局或正文等。所以我的想法是在页面内创建一个自定义 html div 并基本上在其中构建我的页面。

但是，我无法让我的概念验证工作。我已经成功地将滚动控制从 body 上移开，但 div 根本不滚动，更不用说快速滚动了。

我对此很陌生，因此非常感谢任何帮助或反馈。提前致谢。另外，正如我所说，我是新手，还没有开始学习 JavaScript。但我读过这可以通过纯 CSS 实现。

编辑：我使用 Firefox 88 进行显示，但我也尝试过 Chrome 90。

代码如下：

body {
    margin: 0;
    overflow: hidden;
}

.parent-container div {
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
    width: 100vw;

}

.full div {
    scroll-snap-align: start;
    height: 100vh;
    width: 100vw;
    position: relative;
}

.full:nth-child(odd) {
    background: #333;
}

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Practice</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

        <div class="parent-container">

            <div class="full">First</div>
            <div class="full">Second</div>
            <div class="full">Third</div>
        </div>

    </body>
    
    </html>

Answer 1

<div class="parent-container">
  <div class="full">First</div>
  <div class="full">Second</div>
  <div class="full">Third</div>
</div>

body {
  margin: 0;
  overflow: hidden;
}
.parent-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  width: 100vw;
}
.full {
  scroll-snap-align: start;
  height: 100vh;
  width: 100vw;
  position: relative;
}
.full:nth-child(odd) {
  background: #333;
}

工作样本：https://codepen.io/sapm/pen/bGgJgmb 从规则中的 .full 选择器中删除 div 选择器似乎有效。

CSS 滚动捕捉

1 个答案: