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

Popular posts from this blog

html - How to set bootstrap input responsive width? -

Image
i need inline form calendar in both fields. reason can't rid of space between text , borders of input... here picture of problem i've tried set width parent div , input itself.... no good.. here i've done far. fiddle : <div class="modify_search"> <div class="search_wrapper"> <div class="search_header"> <form class="form-inline"> <div class="left"> <span>du</span> <div class="input-group"> <input type="text" class="form-control search_input" id="inlineforminputgroup"> <div class="input-group-addon"> <i class="fa fa-calendar" aria-hidden="true"></i> </div> </div> </div>
Read more

javascript - Highchart x and y axes data from json -

here js fiddle : demo i plotting differences of timestamps in multiple series reading data json. how plot "timestamp","timestamp2","timestamp3" against "tempersensordata" instead of steps? var processed_json = new array(); //ts1 var processed_json1 = new array(); //ts2 // populate initial series (i = 0; < data.length; i++){ processed_json.push(data[i].timestamp/1000); processed_json1.push(data[i].timestamp2/1000); }
Read more

javascript - Get js console.log as python variable in QWebView pyqt -

Image
i'm trying build application creates html + js code python , loads qwebview. the final html + js code following (raw code available here ): <head><meta charset="utf-8" /><script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head><div id="mydiv" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.plotlyenv=window.plotlyenv || {};window.plotlyenv.base_url="https://plot.ly";plotly.newplot("mydiv", [{"type": "scatter", "x": [6.81, 6.78, 6.49, 6.72, 6.88, 7.68, 7.69, 7.38, 6.76, 6.84, 6.91, 6.74, 6.77, 6.73, 6.68, 6.94, 6.72], "y": [1046.67, 1315.0, 1418.0, 997.33, 2972.3, 9700.0, 6726.0, 6002.5, 2096.0, 2470.0, 867.0, 2201.7, 1685.6, 2416.7, 1618.3, 2410.0, 2962.0], "mode": "markers", "ids": [0, 1, 2, 3, 4, 5, 6, 7, 8,
Read more