仅对x轴应用滚动捕捉



我想应用滚动捕捉类型,但仅适用于overflow-x。

我创造了一个例子。我希望在Firefox中有与Chrome相同的行为。(仅在x轴上捕捉,在y轴上禁用(

如果您在Chrome上尝试此示例=>捕捉将不会应用于y轴。如果您尝试使用Firefox=>捕捉将应用于y轴

.scroller {
height: 300px;
overflow: scroll;
scroll-snap-points-y: repeat(320px);
scroll-snap-destination: 0 0;
scroll-snap-type: x mandatory;
}
.scroller section {
width: 1000px;
scroll-snap-align: start;
}
section {
min-height: 100%;
}
<article class="scroller">
<section>
<h2>Section oneSection oneSection oneSection oneSection oneSection oneSection oneSection one</h2>
</section>
<section>
<h2>Section two</h2>
</section>
<section>
<h2>Section three</h2>
</section>
</article>

只需检查此链接:chrome不支持它。

最新更新