如何隐藏滚动条但保留溢出表的功能？ [复制]

Question

我创建了一个表格，其中包含一个具有特定最大高度的容器。我想保留溢出表的滚动功能，但隐藏滚动条本身。

我尝试了一些互联网上的解决方案，但无法实现。

HTML：

<div id="container">
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Coloumn</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td>3</td>
        <td>is</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td>4</td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td>5</td>
        <td>first</td>
        <td>One</td>
        <td>Coloumn</td>
    </tr>
</table>
</div>

CSS：

#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}

#container {
  max-height:200px;
  overflow:auto;
}

这是我创建用来玩的 jsfiddle：

http://jsfiddle.net/k6rp1vsh/

编辑： 网站需要运行的浏览器是Opera 11版本，不支持最新功能！

提前致谢！

Answer 1

试试这个

::-webkit-scrollbar ::-webkit-scrollbar-track ::-webkit-scrollbar-thumb {
    display: none;
}

Answer 2

见sn-p。如果您有任何疑问，请告诉我。

#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}

#container {
  width: 100%;
    overflow: hidden;
    max-height: unset;
}

table#codexpl {
    display: block;
    width: 105%;
    max-height: 200px;
    overflow: auto;
}

<div id="container">
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td>3</td>
        <td>is</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td>4</td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td>5</td>
        <td>first</td>
        <td>One</td>
        <td>Column</td>
    </tr>
</table>
</div>

Answer 3

在css文件中添加这个

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

Answer 4

您需要做的就是将滚动条宽度设置为 0

#container::-webkit-scrollbar {
width: 0px;
}

Answer 5

您可以使用 CSS 轻松实现。

要隐藏滚动条，但仍能保持滚动，可以使用以下代码：

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.hide-scrollbar {
  -ms-overflow-style: none;
}

我为你创建了这个小提琴：http://jsfiddle.net/u105fbx4/

像这样将 class="hide-scrollbar" 添加到您的 DIV 中。

HTML

<div id="container" class="hide-scrollbar">

到 CSS 文件的结尾：

 .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .hide-scrollbar {
      -ms-overflow-style: none;
    }