同一页上有多个滚动条

Multiple scroll bars on the same page

本文关键字:滚动条 一页      更新时间:2023-09-26

我感兴趣的是在同一页上有多个滚动条。。。。在www.jrew和www.indument.se等电子商务商店中看到了几个主要的例子,有人对构建java脚本的最佳方式有什么想法吗?我还想让滚动条同步,最好是以相同的速度。

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

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

要将滚动视图拆分为多个容器,您可以像正常情况一样制作网格布局,并在其中放置嵌套的滚动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>