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

Posted 2023-03-17

【中文标题】如何在不移动其他列的情况下滚动单列内容？

【英文标题】：How to scroll a single column content without moving others column?

【发布时间】：2021-09-24 10:09:33

【问题描述】：

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

【参考方案1】：

如果您有 3 个彼此相邻的容器 - 这是可能的。如果表有 3 列-我认为不重写是不可能的。

因此，对于 3 个单独的 div，将它们设为 inline-block（阻止下一行）并添加宽度。将溢出设置为自动。您也可以添加高度。

丑陋的sn-p紧随其后。

    #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>

【讨论】：

它对我有帮助！我可以使用网格制作这种类型吗？

网格也应该是可能的。只要元素的宽度是固定的并且元素的高度大于预定义的 - 它应该会导致元素滚动条出现（当元素溢出时）。滚动条可以在滚动仍然启用时使用 CSS 隐藏。忘记了隐藏它们的属性，但你可以谷歌它。

滚动条可以用 CSS 隐藏，同时滚动仍然启用。 w3schools.com/howto/howto_css_hide_scrollbars.asp 末尾的示例应该可以工作。