标签: scroll-snap-points
是否可以将 CSS Scroll Snap 应用于 HTML 标签而不是 Body 标签
CSS Scroll Snap 允许浏览器快速滚动到容器中的元素。要将相同的逻辑应用于垂直页面滚动，我发现它必须应用于<body>而不是<html>（见下文）。这不是一个主要问题，但它确实有效地创建了一个滚动区域，<body>而不是使用窗口滚动。
虽然这看起来不错，但它有几个副作用：
- javascript 中不能再使用窗口滚动功能
- Apple 浏览器上的橡皮筋效果响应速度较慢，Mac 上的 Chrome 中也不存在。
我希望它看起来尽可能原生，因此唯一的结论是将它应用于<html>而不是<body>. 然而，以这种方式应用它会阻止它运行。如果您将它应用于两者，它将在 Safari 中正确呈现，但在 Chrome 和 Firefox 中仍然损坏。
问题不是因为<body>在父元素和子元素之间创建了分离，就像<div>在层次结构中添加了另一个元素一样，它仍然可以正常运行。
这是功能代码，但应用于<body>而不是<html>.
<html>
<body>
<div class="extra_parent">
<div class="child">ONE</div>
<div class="child">TWO</div>
<div class="child">THREE etc..</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
html {
height: 100vh;
overflow: hidden
}
.child {
position: relative;
height: …推荐指数
解决办法
查看次数
使用滚动捕捉和位置粘性进行堆栈滚动
我scroll-snap结合使用position: sticky这似乎是一种优雅的方法，可以在滚动时实现堆叠卡片效果。
它在桌面上运行得非常好，但在 Safari (iOS12.1) 上我遇到了一些小故障，有时卡片会一起滚动，跳过内容。
在移动 Safari 上复制该错误的最明显方法是：
- 向下滚动到最底部的屏幕
- 关闭（模糊）并重新打开 Safari
- 然后尝试再次向上滚动
遇到的错误：它跳过所有屏幕，导致无法导航。
我想让它只使用 CSS，但我愿意提供任何（好的）解决方案。最后，它应该在 ReactJS 应用程序中工作。
演示： https: //codepen.io/theo_t/full/BbGoWq
.container {
width: 100%;
height: 100vh;
overflow: scroll;
-webkit-overflow-scrolling: touch;
scroll-snap-type: y mandatory;
}
.item {
position: sticky;
position: -webkit-sticky;
top: 0;
scroll-snap-align: start;
width: 100%;
height: 100vh;
}
推荐指数
解决办法
查看次数
CSS 滚动捕捉在到达顶部时溢出主体
我有一个非常奇怪的问题。也许是行为上的错误scroll-snaps？
当我到达页面顶部并继续向上滚动时，如果我不再向下滚动，则正文会溢出并停留在那里。即使我重新加载页面。
仅在 Chrome for Mac（版本 75.0.3770.100（官方版本）（64 位））中进行，我在 Safari 和 Firefox 中进行了测试，两者似乎都表现正常。
Jsfiddle 在这里，但你不能在那里重现它。可能是因为它位于 iframe 内？
问题视频：
推荐指数
解决办法
查看次数
溢出大于 100vh 的 CSS 滚动捕捉点？
当容器高于 100vh 时，我无法实现滚动捕捉点。我想使用强制捕捉点，但也允许用户在高度大于 100vh 时滚动。
我通过在我希望用户能够滚动浏览的位置添加额外的捕捉点来完成这项工作，而无需捕捉到高于 100vh 的 div 的顶部。
.parent {
min-height: 100vh; //actual is taller than 100vh
scroll-snap-align: start;
}
.child {
scroll-snap-align: center;
}
我希望能够自然地在一个高容器中滚动，而不必总是在滚动时捕捉到顶部。这种在 Chrome 中有效，但在 Safari 中，任何溢出都会使用户回到父级的顶部。有没有办法在高于窗口高度的容器上使用捕捉点，同时能够滚动溢出？
推荐指数
解决办法
查看次数
iOS 中 CSS 仅滚动捕捉
我试图在应用程序中实现 CSS only 滚动捕捉行为，但发现它在 iOS 中无法按预期工作。这是演示该案例的CodePen的链接。
代码附在下面
body, html {
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.panel-container {
width: 100%;
height: 50%;
border: 2px solid lightgray;
box-sizing: content-box;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
scroll-snap-destination: 0 0;
}
.panel {
scroll-snap-align: start;
border: 2px solid;
box-sizing: border-box;
min-width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.one {
border-color: red;
} …推荐指数
解决办法
查看次数
没有带有滚动捕捉类型和 -align 的滚动捕捉 / 简单示例不适用于 Chrome/Firefox /
使用 Chrome / Firefox，我为几张图片创建了一个容器（.container）（列出具有类 img 的项目）。我在容器上添加了滚动捕捉类型。我在类 img 的项目上添加了scroll-snap-align。
我在这里缺少什么？
超文本标记语言
<div class="container">
<ul>
<li class="img"><img src="https://picsum.photos/500"></li>
<li class="img"><img src="https://picsum.photos/500"></li>
<li class="img"><img src="https://picsum.photos/500"></li>
<li class="img"><img src="https://picsum.photos/500"></li>
<li class="img"><img src="https://picsum.photos/500"></li>
<li class="img"><img src="https://picsum.photos/500"></li>
</ul>
</div>
CSS
.img {
margin: 10px 5px;
scroll-snap-align: center;
-webkit-overflow-scrolling: touch;
}
.container {
display: grid;
justify-content: center;
grid-gap: 10px;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
推荐指数
解决办法
查看次数