javascript - 如何创建水平隐藏滚动条

Question

我实际上是在尝试复制您通常在移动应用程序中看到的水平滚动菜单。

我真的不明白为什么它不起作用，尽管对我来说隐藏垂直滚动条并水平滚动似乎合乎逻辑。我知道有许多隐藏垂直滚动条的解决方案，但为什么不能隐藏水平滚动条？

这是我到目前为止创建的演示垂直方式的片段，但我如何修改水平方式？

我试过:
溢出-y:隐藏； 溢出-x:滚动;

但是那没有用...

我可以将它转换为 jquery，但我不确定如何去做，所以如果有兼容的 css 解决方案，那会帮助我。

.block,
.container {
  width: 250px;
  height: 250px;
}
.container {
  border: 1px solid #aaa;
  padding: 5px 0 5px 5px;
  position: relative;
  overflow: hidden;
}
.container-inner {
  position: absolute;
  overflow-x: hidden;
  overflow-y: scroll;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .container-inner,
  .block {
    transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
  }
  .container-inner {
    right: 0;
  }
}
.block {
  padding: 10px 0px 10px 0;
}

<div class="container">
  <div class="container-inner">
    <div class="block">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec.
      <br/>
      <br/>Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam
      arcu. Morbi tristique aliquam rutrum.
      <br/>
      <br/>Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo.
      <br/>
      <br/>Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat
      bibendum erat, nec interdum urna porta sed.
      <br/>
      <br/>Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas
      cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim
      libero.
    </div>
  </div>
</div>

Answer 1

如果你使用 overflow: hidden 滚动条消失了，但你根本无法滚动，所以，如果你想要带有隐藏滚动条的可滚动 div，你要么需要脚本，要么让它成为父级隐藏滚动条。

这是使用非脚本的方法

.container {
  width: 250px;
  height: 220px;           /* 30px less high than inner to "hide" scroll */
  border: 1px solid #aaa;
  overflow: hidden;
}
.block,
.containerinner {
  width: 250px;
  height: 250px;
}
.containerinner {
  padding: 5px 0 5px 5px;
  position: relative;
  overflow: auto;
  overflow-y: hidden;
}
.block {
  padding: 10px 0px 10px 0;
  white-space: nowrap
}

<div class="container">
<div class="containerinner">
    <div class="block">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec.
      <br/>
      <br/>Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam
      arcu. Morbi tristique aliquam rutrum.
      <br/>
      <br/>Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo.
      <br/>
      <br/>Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat
      bibendum erat, nec interdum urna porta sed.
      <br/>
      <br/>Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas
      cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim
      libero.
    </div>
</div>
</div>

这里有 2 个链接显示了一些脚本示例

• How to do a horizontal scroll on mouse wheel scroll?
• https://www.sitepoint.com/10-jquery-horizontal-scroll-demos-plugins/