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

时间:2014-07-29 12:01:21

标签: html css scroll

我看到许多使用

隐藏滚动条的答案
overflow-y: scroll;

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

2 个答案:

答案 0 :(得分:3)

对于基于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插件中使用了隐藏滚动条的这些概念。

答案 1 :(得分:-4)

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

overflow-x: hidden;