如何在不移动其他列的情况下滚动单列内容？

Question

假设我有 3 列。我想在列中添加不同类型的内容。然后我想滚动单个列而不滚动其他列（就像 Facebook 一样）？我该怎么做？

Answer 1

如果您有 3 个容器并排放置 - 这是可能的。如果 table 有 3 列-我认为不重写是不可能的。

所以对于 3 个单独的 div - 使它们成为内联块（防止下一行）并增加宽度。将溢出设置为自动。您还可以添加高度。

丑陋的片段如下。

    #left {
    width:30vw;
    height:100vh;
    display:inline-block;
    overflow:auto;
    }

    #center {
    width:30vw;
    height:100vh;
    display:inline-block;
    overflow:auto;
    }
    #right {
    width:30vw;
    height:100vh;
    display:inline-block;
    overflow:auto;
    }

    <div id="left">
    left <br>left <br>left <br>left <br>more left <br>
    left <br>left <br>left <br>left <br>more left <br>
    left <br>left <br>left <br>left <br>more left <br>
    left <br>left <br>left <br>left <br>more left <br>
    left <br>left <br>left <br>left <br>more left <br>
    left <br>left <br>left <br>left <br>more left <br>
    </div>
    <div id="center">
    center </br>center </br>center </br>center </br>center </br>center </br>center </br>
    more center </br>center </br>center </br>center </br>center </br>center </br>center </br>
    some more center </br>center </br>center </br>

    center </br>center </br>center </br>center </br>center </br>center </br>center </br>
    more center </br>center </br>center </br>center </br>center </br>center </br>center </br>
    some more center </br>center </br>center </br>
    center </br>center </br>center </br>center </br>center </br>center </br>center </br>
    more center </br>center </br>center </br>center </br>center </br>center </br>center </br>
    some more center </br>center </br>center </br>
    </div>

    <div id="right">
    right <br>right <br>right <br>more right <br>right <br>right <br>
    right <br>more right <br>right <br>right <br>right <br>
    more right <br>right <br>right <br>right <br>more right <br>
    right <br>right <br>right <br>more right <br>right <br>
    right <br>right <br>more right <br>right <br>right <br>
    more right <br>right <br>right <br>right <br>more right <br>
    right <br>right <br>right <br>more right <br>right <br>
    right <br>right <br>more right <br>right <br>
    right <br>right <br>more right <br>
    </div>

如何在不移动其他列的情况下滚动单列内容？

How to scroll a single column content without moving others column?

grid

layout

scroll