我看到许多使用
隐藏滚动条的答案overflow-y: scroll;
然后推开滚动条。但是你如何实现水平滚动呢?
答案 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;