Question

我有一个包含2列和多行的表

<table border=0 id="feed">
    <tr><td>something</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something1</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something2</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something3</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something4</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something5</td><td><div class="bubble"></div></td></tr>
    <tr><td>something-else1</td><td><div class="bubble"></div></td></tr>
    <tr><td>something-els2</td><td><div class="bubble"></div></td></tr>
</table>

我希望能够向下滚动而不显示滚动条（暗示行的总高度超过800px限制）。我正在寻找兼容Chrome / Firefox的修补程序。

Feed的当前属性：

  #feed{
    display: block;height: 800px;overflow-y: scroll;
}

这仅适用于chrome框架：

#feed::-webkit-scrollbar { 
    display: none; 
}

修改

我尝试在表格中添加父级（根据Hide scroll bar, but still being able to scroll）：

#outer{
    overflow-y:hidden;
    height:800px;
}
#feed{overflow:scroll;}

HTML：

<div id="outer"><table border=0 id="feed">...</table></div>

请注意，总高度大于800px，因此滚动应该有效。但它没有。

Answer 1

你可以这样做：

#feed{
    display: block;
    height: 100px;
    overflow-y: scroll;
    margin-right: -30px;
}

#outer{
    overflow:hidden;
}

Answer 2

#feed{
    display: block;
    height: 800px;
    overflow-y: hidden;
}

隐藏滚动条（启用滚动）

2 个答案: