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

Posted 2023-03-06

【中文标题】如何隐藏滚动条但保留溢出表的功能？ [复制]

【英文标题】：How can I hide the scrollbar but keep the functionality for my overflowing table? [duplicate]

【发布时间】：2020-06-11 06:42:50

【问题描述】：

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

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

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版本，不支持最新功能！

提前致谢！

【问题讨论】：

这能回答你的问题吗？ Hide scrollbar (with scroll enabled)

【参考方案1】：

试试这个

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

【讨论】：

很抱歉，但这在 Opera v11 中不起作用

【参考方案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>

【讨论】：

查看完整页面的 sn-p。

这个在我正在开发的浏览器中工作，Opera 11版，太棒了！

谢谢。如果您对我的回答感到满意，请为答案投票。

我唯一不喜欢的是 105% 的宽度属性

【参考方案3】：

在css文件中添加这个

::-webkit-scrollbar 
 display: none;

【讨论】：

很抱歉，但这在 Opera v11 中不起作用

【参考方案4】：

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

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

【讨论】：

很抱歉，但这在 Opera v11 中不起作用

【参考方案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;