javascript - 同一页面上的多个滚动条

Question

我对在同一页面上有多个滚动条很感兴趣....看到几个主要在 www.jrew 和 www.indumenti.se 等电子商务商店的例子，有没有人对最好的方法有任何想法构造java脚本？我还想同步滚动条的时间，最好以相同的速度同步。

Answer 1

您可以使用 overflow: scroll 或 overflow-y: scroll 使任何容器可滚动。一般的方法是固定这些容器的高度以便它们滚动。例如

.scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* enables momentum-scrolling on iOS */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

要将 ScrollView 拆分为多个容器，您可以制作例如像普通的网格布局，并在里面放置一个嵌套的滚动 div。例如

<div class="row row-6">
    <div class="scroll">
        your left content
    </div>
</div>

<div class="row row-6">
    <div class="scroll">
        your right content
    </div>
</div>