Question

我有一个容器，其中包含一些具有特定宽度（小于内容的宽度）的文本，我想添加水平滚动，但是应该隐藏滚动条。

这是我尝试过的东西： https://jsfiddle.net/ehp3qnty/576/

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-bottom: -50px;
  /* maximum width of scrollbar */
  padding-bottom: 50px;
  /* maximum width of scrollbar */
  overflow-y: hidden;
  overflow-x: scroll;
}

p {
  white-space: nowrap;
}

<div class="parent">
  <div class="child">
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
  </div>
  <!-- .child -->
</div>
<!-- .parent -->

但是我无法通过左右滑动或在台式机上滚动移动设备，而且滚轮也不起作用。

那么如何隐藏水平栏却保留这些功能呢？

该解决方案应该与大多数浏览器兼容，并且不使用任何库，仅使用纯CSS / JS。

Answer 1

您可以使用它来更改滚动条的css：）

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

您可能想做的是这样的：

.child::-webkit-scrollbar {
    height: 10px;
}

或者（为了使其在不完全隐藏的情况下不引人注目）：

.child::-webkit-scrollbar {
    height: 1px;
}

编辑：您的JSFiddle示例在我的浏览器（MacOSX上为Google chrome）和我的移动Safari Iphone X（最新版本）上也可以正常工作

Answer 2

css代码将为您提供帮助

              .parent {
               width: 400px;
               height: 200px;
               border: 1px solid #aaa;
               overflow:auto;
               overflow-y: hidden;
                  }

              .child {
                height: 100%;
                margin-bottom: -50px;
                /* maximum width of scrollbar */
                   padding-bottom: 50px;
                 /* maximum width of scrollbar */

                    }

                    p {
                   white-space: nowrap;
                     }

Answer 3

对于您的用例，请使用：

.child::-webkit-scrollbar {
    height: 10px;
}

隐藏水平滚动条，但保持滚动功能

3 个答案: