时间戳

首页 > 解决方案 > HTML/CSS - 在第一项之后滚动捕捉，之后继续定期滚动

html - HTML/CSS - 在第一项之后滚动捕捉，之后继续定期滚动

问题描述

我有一个水平滚动框，中间有两个项目。第一个项目是一个大的div。我试图让滚动捕捉到第一个项目的末尾，然后定期滚动第二个项目div及其溢出的内容。这是一个演示我当前设置的 CodePen。

的HTML：

<div class="snap-row">
    <div class="snap-section large"></div>
    <div class="snap-section">
        <div class="items">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</div>

和CSS：

.snap-row {
    align-items: stretch;
    display: flex;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-padding: 32px;
    scroll-snap-type: x mandatory;
    width: 100%;
}

.snap-section {
    align-items: flex-start;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
    width: 50%;
}

.snap-section.large {
    background: blue;
}

.items {
    background: chartreuse;
    font-size: 0;
    padding: 0 32px;
    white-space: nowrap;
}

.item {
    background: red;
    box-sizing: border-box;
    display: inline-block;
    height: 300px;
    margin: 0 8px;
    width: 300px;
}

非常感谢！

标签： htmlcssscrollflexboxscrollbar

解决方案

您需要添加一些CSS：

.snap-section.large {
background: blue;
scroll-snap-align: start;}

这是为了保持大元素可见，等待滚动。

.item {
    scroll-snap-align: start;}

这是为了在用户滚动时保持小元素可见，否则它会迅速回到大元素。
它现在应该可以工作了。

推荐阅读