隐藏滚动条（启用滚动）答案

【问题标题】：Hide scrollbar (with scroll enabled)隐藏滚动条（启用滚动）
【发布时间】：2014-04-07 07:29:16
【问题描述】：

我有一张有 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>

我希望能够在不显示滚动条的情况下向下滚动（暗示行的总高度超过了 800 像素的限制）。我正在寻找与 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>

请注意，总高度大于 800 像素，因此滚动应该可以工作。但它没有。

【问题讨论】：

您如何期望人们在不显示滚动条的情况下滚动（甚至知道有可以滚动到的隐藏内容）？ overflow: hidden 似乎符合你的要求，但它会是糟糕的用户体验。
查看link
@RoryMcCrossan 不，这会禁用滚动功能。在我工作的环境中，“隐藏内容”的存在可以在滚动消息列表时扣除。

标签： javascript jquery html css

【解决方案1】：

你可以这样做：

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

#outer{
    overflow:hidden;
}

【讨论】：

因为我的小桌子，我使用了 100px 高度 :)
我知道已经有好几年了，但是：您可能希望在提要元素上使用一些正确的填充来抽象出即使在同一个浏览器中，滚动条的宽度也可能因操作系统而异（firefox +ubuntu 例如有 10px);这可能在每种情况下都无关紧要，但如果您想显示带有圆形边框的项目列表，您可能会在没有填充的情况下切断右侧，从而产生不一致的外观。

【解决方案2】：

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

【讨论】：