如何隐藏水平条滚动条但保持滚动功能 [英] How to hide horizontal bar scrollbar but keep scroll function

问题描述

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

overflow-y:滚动；

并将滚动条推开.但是你将如何实现水平滚动呢?

解决方案

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

.scrollable-container-class::-webkit-scrollbar {高度:0；宽度:0；}

这是最简单的，但不是跨浏览器的方式.不要忘记(仍然蹩脚的)IE 和 Firefox.如果您可以忍受容器顶部的空白填充，您可以将可滚动容器放入另一个带有 overflow:hidden; 的容器中.可滚动容器应具有 position:relative 并向下移动 17px(通常浏览器的滚动条高度/宽度).示例是此处.

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

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

function getBrowserScrollSize(){var css = {边界":无"，"box-sizing": "content-box","height": "200px",边距":0"，填充":0"，宽度":200像素"};varinner = $("<div>").css($.extend({}, css));var outer = $("
").css($.extend({"left": "-1000px","溢出": "滚动","位置": "绝对",顶部":-1000px"}, css)).append(inner).appendTo("body").scrollLeft(1000).scrollTop(1000);var 滚动大小 = {高度": (outer.offset().top -inner.offset().top) ||0,"宽度": (outer.offset().left -inner.offset().left) ||0};外层删除()；返回滚动大小；}

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

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

I see lots of answers for hiding the scrollbar by using

overflow-y: scroll;

and pushing the scrollbar away. But how would you achieve this for horizontal scrolling?

解决方案

For webkit-based browsers (apple safari, google chrome, opera) you can get rid of scrollbar with simple CSS:

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

It's easiest, but not cross browser way. Do not forget about (still lame) IE and Firefox. If you can live with empty padding at the top of your container, you can place your scrollable container into another container with overflow:hidden; scrollable container should have position:relative and be shifted down by 17px (usual browser's scrollbar height/width). Example is here.

If you use this way, you should know that zooming page may make your scrollbar visible. Also different browsers/OS may use different scrollbar height/width. For example, Apple Mac scrollbars are located over content, so to hide scrollbars on Mac scrollable container should have padding at bottom.

So, the best way is to combine these two methods: there is no need to do anything for webkit-based browsers as we can do it with simple CSS - IE and FF ignores unknown CSS selectors. For IE and FF we will wrap content into wrapper and shift wrapper up to compensate content shifting (to leave content on it's place). Example is here. Next thing is calculating scrollbar height with JS and set top offset for wrapper and content (not with CSS, but with JS as it's dynamic). I'm using next function to get browser scrollbar height/width:

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;
}

The last thing that is left - zooming browser. To fix it you should bind handler for window resize event and check if scrollbar size is changed - if it's changed - browser was zoomed in/out and you should update top offset for you content and wrapper.

Please note that FF works under Mac and uses OS scrollbar (which is over content), and FF does not support hiding/styling scrollbar with CSS. I have few ideas how to hide it, but didn't try them yet. I've used these concepts of hiding scrollbar in jQuery Scrollbar plugin.

这篇关于如何隐藏水平条滚动条但保持滚动功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！