Question

我看到许多使用

隐藏滚动条的答案

overflow-y: scroll;

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

Answer 1

对于基于webkit的浏览器（苹果狩猎，谷歌浏览器，歌剧）你可以用简单的CSS摆脱滚动条：

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

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

如果您使用这种方式，您应该知道缩放页面可能会使您的滚动条可见。不同的浏览器/ OS也可以使用不同的滚动条高度/宽度。例如，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下运行并使用操作系统滚动条（内容过多），FF不支持使用CSS隐藏/设置滚动条。我几乎没有想法如何隐藏它，但还没有尝试过。我在jQuery Scrollbar插件中使用了隐藏滚动条的这些概念。

Answer 2

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

overflow-x: hidden;

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

2 个答案: