我将此文章用作参考点,具体来说就是这项工作代码段,但是在我的页面(以下脚本)中,垂直快照滚动不起作用。您知道为什么吗?
I used this article as point of reference, in specific this working snippet, but in my page (script below) the vertical snap scrolling isn't working. Do you have any idea why?
.parent { height: 100vh; scroll-snap-type: mandatory; scroll-snap-points-y: repeat(100vh); scroll-snap-type: y mandatory; } section { height: 100vh; scroll-snap-align: start; position: relative; } .one { background-color: red; } .two { background-color: blue; } .three { background-color: grey; } .four { background-color: green; }
<div class="parent row"> <section class="one"> </section> <section class="two"> </section> <section class="three"> </section> <section class="four"> </section> </div>
推荐答案
您在代码段中遇到的主要问题是,显示的滚动条属于正文,在该正文中未定义任何滚动快照属性。这就是为什么滚动时没有任何捕捉行为的原因。
The major problem you have in your code snippet, is that the displayed scrollbar belongs to the body, where no scroll-snap properties have been defined. This is why you do not have any snapping behaviour when scrolling.
要获得预期的结果,您需要
To achieve your expected result, you need to
在工作样本下
请注意,请注意(对于chrome)的捕捉属性已经发展,并且您正在使用不赞成使用的功能。请参见 Google开发人员上的CSS滚动快照。
As a note, consider that snapping properties (for chrome) have evolved, and that you are using deprecated features. See the css scroll snap on google developers.
还请注意,此答案仅适用于铬,不涉及polyfill部分。仅仅是这里涉及的主要滚动概念
Note also that this answer deals only with chrome, without the polyfill part. It is just the main scroll concept that is involved here
html, body { height: 100vh; overflow: hidden; } .parent { overflow: scroll; height: 100vh; scroll-snap-type: mandatory; scroll-snap-points-y: repeat(100vh); scroll-snap-type: y mandatory; } section { height: 100vh; scroll-snap-align: start; position: relative; } .one { background-color: red; } .two { background-color: blue; } .three { background-color: grey; } .four { background-color: green; }
<script src="ajax.googleapis/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent row"> <section class="one"> </section> <section class="two"> </section> <section class="three"> </section> <section class="four"> </section> </div>
更多推荐
CSS滚动捕捉,垂直不起作用
发布评论