Remove scrollbars Firefox desktop

Question

EDIT 2:

EDIT 1:

C'mon? I'm guessing the padding-right trick won't work with border-box anyway?

Surely there's some combo of max/min -width that will do the trick?

Original Post:

I know this question is similar to previous questions like this but mine is much more narrow.

Specifically I'm only seeking a solution to Firefox desktop as FF on android mobile, and all other browser combos provide a supported and simple way of turning off scrollbars. For example: -

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

And whatever combo of flexi-box and box-sizing just works (tm) on all other UA implementations. (See example/demo code below).

Now I can calculate FF scrollbar width and add that as padding but do I really have to?

Q. Has anything from Mozilla replaced -moz-scrollbars-none since it was deprecated here ?

Illustrated problem: -

<!DOCTYPE html>
<html>
<head>
<!-- The "viewport" tag is needed to stop font-size changes landscape/portrait -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ask for fullscreen Web App -->
<link rel="manifest" href="layout.json">

<style type="text/css">

*, *:before, *:after {
    box-sizing: inherit;
}
html, body {
    height: 100vh;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    -ms-overflow-style: none;
}
.topbar {
    display: flex;
    width: 100%;
    align-items: center;
}
.containerrow1 {
    margin: 15px;
    padding: 15px;
    display: flex;
    flex: 2;
    background-color: yellow;
}
.containerrow2 {
    margin: 15px;
    padding: 15px;
    display: flex;
    flex: 17;
    background-color: aliceblue;
    min-height: 0; /* new; resolves Firefox bug */
    min-width: 0; /* new; resolves Firefox bug */
}
.containerrow3 {
    padding: 15px;
    display: flex;
    flex: 1;
    background-color: yellow;
}

.outercontainer {
    display: flex;
    flex-direction: column;
    background-color: black;
    height: 100%; /* new */
}
.section {
    display: flex;
    flex-direction: column;
    background-color: aliceblue;
    height: 100vh;
        box-shadow: inset 0 0 8px orange;
    padding: 5px;
}
main {
  width:100%;
  height: 100%;
  overflow: auto;
}


#myDIV {
    display: block;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    border: 3px solid green;
    overflow-y: auto;
    pading-right: 25px;
}
#myDIV2 {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    border: 3px solid green;
    overflow-y: auto;
    box-sizing: border-box;
    pading-right: 25px;
}
#listDiv {
    height: 800px;
    width: 2000px;
    background-color: coral;
}

</style>

<script type="application/javascript">
function myFunction() {
        var elmnt = document.getElementById("myDIV");
        var x = elmnt.offsetHeight;
    var y = elmnt.scrollTop;
    document.getElementById ("demo").innerHTML = "Horizontally: " + x + "px<br>Vertically: " + y + "px";
}
</script>
</head>
<body class='section'>
    <div class="outercontainer">
        <div class="containerrow1">
            <div class="topbar">Blah</div>
        </div>
        <div class="containerrow2">

          <main>
            <div id="myDIV" onscroll="myFunction()">
              <div id="listDiv">Scroll inside me!</div>
            </div>
            <div id="myDIV2">
             <div>
             lots of stuff
             </div>
            <p id="demo">www</p>
            </div>
          </main>


        </div>
        <div class="containerrow3">
            <div class="topbar">footer</div>
        </div>
    </div>
</body>
</html>

Answer 1

滚动条行为在Firefox 57中已修复

Remove scrollbars Firefox desktop

Question

1 answers

solution1
0 ACCPTED 2017-11-20 22:27:54

Remove scrollbars Firefox desktop

Question

1 answers

solution1 0 ACCPTED 2017-11-20 22:27:54

solution1
0 ACCPTED 2017-11-20 22:27:54