卷轴-对齐和滚动-卡-类型不够吗？
卷轴-对齐和滚动-卡-类型不够吗？
提问于 2020-05-02 21:17:11
我试着用这个：
https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type
https://developer.mozilla.org/docs/Web/CSS/scroll-snap-align
我想要复制的例子：https://codepen.io/mykiwi/pen/xxwPKJr?editors=1100
<div class="scroller">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>.scroller {
text-align:left;
height:250px;
width:270px;
overflow-y:scroll;
display:flex;
flex-direction:column;
box-sizing:border-box;
border:1px solid #000;
scroll-snap-type:y mandatory
}
.scroller>div {
flex:0 0 250px;
background-color:#663399;
color:#fff;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
scroll-snap-align:start;
}
.scroller>div:nth-child(even) {
background-color:#fff;
color:#663399
}我的代码：https://codepen.io/mykiwi/pen/mdeqePo?editors=1100
我的背景也是布尔玛
在我的CSS中重现这个例子有什么问题吗？
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-02 22:02:33
这是一个有点棘手的工作，而且由于MDN没有很好地描述它，这使它更难。
究竟是什么问题呢？
您提供的包装元素不满足执行此操作的期望。那这是什么意思？
为了确保scroll-snap-type正确工作，我们应该确保窗口中唯一可用的滚动条是包装元素滚动条，在您的例子中，它是按类名screen划分的。
怎么修呢？
因此，您所要做的就是确保滚动元素与父包装元素完全相关，在您的示例中，该元素由screen类名指示。要确保您在右边的one body html**，中看到的滚动条溢出到** hidden ，您应该使和溢出，以防止它们滚动。如下所示：
html,
body {
overflow: hidden;
}然后，需要启用属于screen部门的右滚动条。
.screen {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}所以它会像魅力一样运作。
下面是实际工作的示例：codepen.io
此外，还有一个类似的问题，您可以找到这里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61566412
复制相关文章
相似问题
腾讯云开发者
