javascript - Remove scrollbars Firefox desktop -
edit 2:
see mozilla bug
edit 1:
c'mon? i'm guessing padding-right trick won't work border-box anyway?
surely there's combo of max/min -width trick?
original post:
i know question similar previous questions this mine more narrow.
specifically i'm seeking solution firefox desktop ff on android mobile, , other browser combos provide supported , simple way of turning off scrollbars. example: -
::-webkit-scrollbar {display:none;} -ms-overflow-style: none;
and whatever combo of flexi-box , box-sizing works (tm) on other ua implementations. (see example/demo code below).
now can calculate ff scrollbar width , add padding have to?
q. has mozilla replaced -moz-scrollbars-none since deprecated here?
illustrated problem: -
<!doctype html> <html> <head> <!-- "viewport" tag needed stop font-size changes landscape/portrait --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- ask 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>
Comments
Post a Comment