Hiding scrollbar in old mozilla versions, preserving scroll

Question

I am writing a layout that has three separate scrollable columns of pictures, just like this page. The difference is that in our design there is only one pixel between images. I managed to hide the scrollbars in chrome and in the newest Firefox. In Firefox 63.0.1 they are still there and I need to hide them While still preserve - ability to scroll divs down separately - the pictures distance 1 px apart or wider only for those older firefox versions.

Mostly I tried hiding visually via overflow hidden on outer container. For Chrome it works.

 -ms-overflow-style: -ms-autohiding-scrollbar;
    ::-webkit-scrollbar {
    display: none;
    }

Here I found This:

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

And here I found

body.is-firefox . scroll-container {

    overflow: hidden;
    -webkit-transform: translateX(-18px);
    -ms-transform: translateX(-18px);
    transform: translateX(-18px);
}
body.is-firefox .scroll-container .inner {

    height: 100%;
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
    overflow-y: scroll;
    overflow-x: hidden;

}

Those would be lovely, if I could have more whitespace than 1px between the images. Or I know for sure that the device is not the newest of Firefox, then I can use those tricks perhaps.

I searched and read that identifying features is more correct and realiable that identifying browser. Tried using modernizr to know what features does users browser support

.no-cssscrollbar .box { 
color: red;
 }
.cssscrollbar .box {
 color: green;
 }

Not sure if I was detecting the correct feature or if it can detect what I want. In the codepen example it seemed to be working Sort of. But if I tried on my webpage Chrome also had those "no-cssscrollbar" classes although I can't see any scrollbars in Chrome and there are possibility to hide them.

Anyway: I still have scrollbars in firefox 63.0.1 and I guess older version as well.

Please help me to have code to : - identfy if browser used can hide the scrollbar or not - identify if browser used is older Firefox

Thank You

score 0 · Accepted Answer · answered Feb 01 '19 at 20:25

Use this CSS here:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* 
only needed once */

:-moz-any(#content,#appcontent) browser{
margin-right:-14px!important;
overflow-y:scroll;
margin-bottom:-14px!important;
overflow-x:scroll;
}

Source: https://support.mozilla.org/en-US/questions/1216436#answer-1108340

Hiding scrollbar in old mozilla versions, preserving scroll

1 Answers1