How To Hide Horizontal Bar Scrollbar But Keep Scroll Function

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?

Solution 1:

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:

functiongetBrowserScrollSize(){

    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.

Solution 2:

change Y to X Y = vertical X = horizontal

overflow-x: hidden;