如何隐藏水平条滚动条但保持滚动功能答案

【问题标题】：How to hide horizontal bar scrollbar but keep scroll function如何隐藏水平条滚动条但保持滚动功能
【发布时间】：2014-07-29 23:10:08
【问题描述】：

我看到很多关于使用隐藏滚动条的答案

overflow-y: scroll;

然后将滚动条推开。但是你将如何实现水平滚动呢？

【问题讨论】：

你试过用'overflow-x:scroll'然后把它推开吗？
stackoverflow.com/questions/16670931/…
不要认为这可以通过 CSS 实现。如果每个浏览器/系统设置都按假设设置，您会发现的任何技巧仍然很容易破坏/仅在某些条件下在某些操作系统上的某些浏览器中起作用。您可能想在其中一种 Javascript 解决方案上试试运气，它们也不完美，但至少更可靠一些。
虽然我无法提供答案，但您永远不应该进行水平滚动，这被认为是非常糟糕的做法，并且会使您的网站使用起来不友好。
你能推荐一个gpgekko吗？

标签： html css scroll

【解决方案1】：

对于基于 webkit 的浏览器（apple safari、google chrome、opera），您可以使用简单的 CSS 摆脱滚动条：

.scrollable-container-class::-webkit-scrollbar {
    height: 0;
    width: 0;
}

这是最简单的，但不是跨浏览器的方式。不要忘记（仍然蹩脚的）IE 和 Firefox。如果您可以在容器顶部使用空填充，则可以将可滚动容器放入具有溢出的另一个容器中：隐藏；可滚动容器应该有 position:relative 并向下移动 17px（通常浏览器的滚动条高度/宽度）。例如here。

如果您使用这种方式，您应该知道缩放页面可能会使您的滚动条可见。不同的浏览器/操作系统也可能使用不同的滚动条高度/宽度。例如，Apple Mac 滚动条位于内容上方，因此要在 Mac 可滚动容器上隐藏滚动条，底部应该有填充。

所以，最好的方法是结合这两种方法：对于基于 webkit 的浏览器不需要做任何事情，因为我们可以用简单的 CSS 来做 - IE 和 FF 会忽略未知的 CSS 选择器。对于 IE 和 FF，我们会将内容包装到包装器中并向上移动包装器以补偿内容移动（将内容留在原处）。例如here。接下来是使用 JS 计算滚动条高度并为包装器和内容设置顶部偏移量（不是使用 CSS，而是使用 JS，因为它是动态的）。我正在使用下一个函数来获取浏览器滚动条的高度/宽度：

function getBrowserScrollSize(){

    var css = {
        "border":  "none",
        "box-sizing": "content-box",
        "height":  "200px",
        "margin":  "0",
        "padding": "0",
        "width":   "200px"
    };

    var inner = $("<div>").css($.extend({}, css));
    var outer = $("<div>").css($.extend({
        "left":       "-1000px",
        "overflow":   "scroll",
        "position":   "absolute",
        "top":        "-1000px"
    }, css)).append(inner).appendTo("body")
    .scrollLeft(1000)
    .scrollTop(1000);

    var scrollSize = {
        "height": (outer.offset().top - inner.offset().top) || 0,
        "width": (outer.offset().left - inner.offset().left) || 0
    };

    outer.remove();
    return scrollSize;
}

剩下的最后一件事 - 缩放浏览器。要修复它，您应该为窗口调整大小事件绑定处理程序并检查滚动条大小是否已更改 - 如果已更改 - 浏览器已放大/缩小，您应该为您的内容和包装器更新顶部偏移量。

请注意，FF 在 Mac 下工作并使用 OS 滚动条（超出内容），FF 不支持使用 CSS 隐藏/样式化滚动条。我对如何隐藏它的想法很少，但还没有尝试过。我在jQuery Scrollbar插件中使用了这些隐藏滚动条的概念。

【讨论】：

【解决方案2】：

将 Y 更改为 X Y = 垂直 X = 水平

overflow-x: hidden;

【讨论】：