没有滚动条的水平滚动答案

【问题标题】：Horizontally scrollable without scrollbar没有滚动条的水平滚动
【发布时间】：2020-03-06 04:53:46
【问题描述】：

我试图模仿overflow-y:hidden 到overflow-x 的行为，但它的行为方式不同。 overflow-x:hidden 不允许滚动（通过拖动鼠标）。

#container {
    width: 300px
}
#modules {
    height: 50px;
    padding: 5px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.module {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #ddd;
}

如何在没有滚动条的情况下获得相同的结果？我可以使用 javascript/jQuery 插件。

计划是使用箭头，也许是自定义滚动条

【问题讨论】：

您可以对内部元素使用绝对定位，然后使用按钮更改顶部/左侧位置。
javascript怎么样？ davetayls.me/jquery.kinetic jquery-plugins.net/…
一个额外的内包装？还是在#modules 上？
你可以试试iscrolljs.com，它有很好的文档记录，可以轻松移除滚动条而不会丢失滚动功能。
先生。外星人谢谢，我在寻找解决方案时偶然发现了这一点，很可能会使用自定义滚动条

标签： html css

【解决方案1】：

这是我基于 CSS 的解决方案 - 在所有设备上都简单而美观，无需额外的 JS。

将固定高度和溢出隐藏添加到父元素（在您的情况下为#container）
放大#modules 的高度 - 这会在父元素下为滚动条创建足够的隐藏位置（因为#container 的高度较小，这个位置是不可见的）

使用-webkit-overflow-scrolling:touch; 是不错的选择，在 iPad 和 iPhone 上表现良好

#container {
    width: 300px;
    height: 60px;
    overflow: hidden;
}
#modules {
    height: 90px; /* 40px - more place for scrollbar, is hidden under parent box */
    padding: 5px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

现场演示：http://jsfiddle.net/s6wcudua/

【讨论】：

可以在没有溢出的情况下工作：隐藏；（应该是“隐藏的”）
不错的解决方案，但用户如何在非触控设备上滚动？
@isapir：将光标移到该区域上，然后在使用滚轮或类似功能的同时按住 shift。

【解决方案2】：

#modules {
    height: 50px;
    padding: 5px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
       display: none;
    }
}

这仅适用于基于 webkit 的浏览器。

【讨论】：

【解决方案3】：

您可以尝试使用::-webkit-scrollbar 伪元素，如here. 所示

【讨论】：

【解决方案4】：

http://iscrolljs.com/

在我看来，最好的 Javascript 自定义滚动条。它适用于移动、IE9+ 和现代浏览器。大量的选项和回调。是的，您可以禁用可见滚动条，但仍保留水平滚动。

【讨论】：