在网页上，如何只为特定部分设置滚动条？

leora 发表于 Dev

里奥拉

在回答这个问题的背后，我有一个看起来像这样的页面。

 <div style="white-space: nowrap;">
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
 </div>

如果跨度很大，此页面将不会自动换行，并且将继续在页面上水平移动，并为我提供水平滚动条。在每个范围内，我都有一个html表格，但是我不确定这是否很重要。

这很好用，但是当一个跨度在垂直方向上真的很长而其他跨度很短时，我遇到了一个问题，因为您必须垂直向下滚动才能看到您具有水平滚动条。我试图找出一种解决此问题的方法，以使水平滚动条始终在页面上可见，而不管特定跨度段的垂直长度如何。

例如，如果您看一下trello（请参见下面的屏幕截图）。如果您在垂直方向上有一个非常长的部分，则只需在该部分上添加一个垂直滚动条，因此不需要向下滚动整个页面。

以我为例，每个范围内都有一个html表。为该表（而不是整个页面）实现垂直滚动条的推荐方法是什么？

在此处输入图片说明

lix药

您需要在内部元素上使用max-height和overflow-y，并需要在外部元素上设置尺寸：

的HTML

<div class="outer">
    <div class="inner">foo</div>
    <div class="inner">bar</div>
    <div class="inner">whatever</div>
</div>

的CSS

.outer {
    border: 2px solid red;
    float:left;
    top:0;
    bottom:0;
    position:absolute;
}
.inner {
    max-height:100%;
    overflow-y:auto;
    border: 2px solid blue;
    width:30%;
    margin-right:2%;
    float:left;
}

这是一个工作的小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。