时间戳

首页 > 解决方案 > CSS 滚动捕捉

html - CSS 滚动捕捉

问题描述

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

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

但是，我无法让我的概念验证工作。我已经成功地将滚动控制从正文中移开，但是 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>

标签： htmlcss

解决方案

<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 选择器似乎有效。

推荐阅读