隐藏“水平”滚动条但仍能滚动

Question

我需要帮忙隐藏水平滚动条，但仍能滚动。我已经使用了WebKit，但在IE和Firefox中不起作用。我看到很多有关垂直滚动条的帮助，但对水平滚动条不起作用。有什么帮助吗？

更新：我已经创建了一个JSFiddle来展示我的问题。我想隐藏水平滚动条并且仍然能够滚动而不使用

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

http://jsfiddle.net/o1xoh9w8/1/

- Acer Buxton

---

是的，我已经看到了很多关于垂直滚动条的方法。我已经尝试将相同的技术应用于水平滚动条，但是没有得到期望的结果。可以参考这个链接：https://dev59.com/j2Qn5IYBdhLWcg3wpYj0。 - Acer Buxton

CSS使用overflow-x和overflow-y，但我不知道你是否知道这一点。 - Martin

overflow-x和overflow-y会隐藏滚动条，但我想要同时隐藏滚动条并且能够滚动。 - Acer Buxton

请提供您尝试过的代码的 JsFiddle，我们可以帮助您调试它。 - Bagzli

我建议使用Prefect Scrollbar js插件。我已经成功地使用过它。它不会显示任何滚动条，直到用户悬停在需要滚动的区域上，然后它会显示一个小巧而不显眼的滚动条，可以轻松自定义或完全隐藏。 - zgood

Answer 1

以下是操作步骤，我已在Chrome、IE、Firefox、Opera、Safari（Windows）和Edge中进行了测试：

<h1>You can scroll with mouse wheel</h1>

<div id="box">
    <div id="content">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
</div>

h1{font-weight:bold;font-size:2em;} /* ignore only for header */
/* *********************** */
div#box{
    height:200px;
    width:300px;     
    overflow:hidden;
    border:1px solid black;
    padding: 10px;
}

div#content{
    height:200px;
    width:326px;
    /*
     * Uncomment to see scrollbar
    width:300px;
    */
    overflow:auto;
}

这里有一个 JSFiddle：http://jsfiddle.net/JoshMesser/VUSuZ/

感谢JsFiddle的作者。

编辑：

对于垂直滚动，只需要改变高度即可。你所做的是将滚动条推到用户看不见的地方，所以对于他们来说它不存在，但实际上是隐藏在元素后面的。这是基于我上一个JS Fiddle的链接。你会发现我只是强制p标签单行显示以获得水平滚动效果，然后增加了高度来隐藏可滚动的条。

http://jsfiddle.net/VUSuZ/575/

- Bagzli

---

这个适用于垂直滚动，我正在寻找适用于水平滚动的东西。我已经在JSFiddle上更新了我的代码。请看一下，任何帮助都可以。 - Acer Buxton

我刚刚看了更新后的代码片段，水平滚动似乎不起作用了。也许有些东西已经改变了。但是现在有没有办法解决呢？ - faraz

@faraz 我的答案中有2个fiddles。第一个fiddle只能垂直滚动，我刚在Chrome中测试过，使用鼠标滚轮即可上下滚动。第二个fiddle只能水平滚动，您可以按住Shift键，然后使用鼠标滚轮左右滚动。我也在Chrome中测试过，对我来说运行良好。 - Bagzli

Answer 2

我认为你不想使用

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

因为它会隐藏所有的滚动条。 一个更好的方法是隐藏滚动条但仍然允许在特定容器中进行滚动，可以按照下面的例子来操作: HTML

<div class="container">
  <table>
    <tbody>
      <tr>
         <td>Example</td>
         <td>Example</td>
         <td>Example</td>
         <td>Example</td>
         <td>Example</td>
         <td>Example</td>
         <td>Example</td>
         <td>Example</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.container {
    overflow-x: auto;
    white-space: nowrap;
}

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

- Hussain Pettiwala

Answer 3

我使用了固定高度的方法。

注意：这种方法只在特定情况下有用。

#container1{
    height: 50px;

    /* Just for presentation. Can be removed */
    border: 1px solid red;

    /* Hides content outside this container */
    overflow: hidden;
}

#container2{
    /* Height is significantly greater than the height of container#1 to hide
       any possible scroll */
    height: 100px;
    overflow: auto;
    white-space: nowrap;
}

<div id="container1">
  <div id="container2">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit, ante laoreet mattis blandit, arcu nisi blandit felis, et molestie justo lacus et sem. Nunc tempor tellus sit amet eleifend tristique. Integer eget condimentum lectus, nec viverra risus. Nullam leo lectus, placerat vitae porta eget, auctor et nisi. Suspendisse feugiat in lacus accumsan tincidunt. Fusce pulvinar accumsan sem sit amet finibus. Curabitur volutpat mi vitae eros mattis congue. In ut sem eu tellus egestas lobortis vitae eu felis. Maecenas sodales, nisl eu bibendum vulputate, neque leo finibus odio, sit amet bibendum libero dolor sed diam. In molestie magna vitae dui vulputate, eu consequat dui ullamcorper. In hac habitasse platea dictumst. Vestibulum pulvinar, mi quis mollis pulvinar, metus justo aliquet arcu, vel venenatis ipsum dolor at sapien. Sed ac odio bibendum, feugiat nibh at, viverra mi. Morbi sem nisi, ultricies non nulla pretium, gravida malesuada neque.
  </div>
</div>

我的情况是移动屏幕的水平滚动按钮容器 - 按钮固定在上方块上（+边距），并具有固定高度。

- Nikita