0
EDIT 2：また削除スクロールバーFirefoxのデスクトップ
EDIT 1：
勘弁してくれよ？私はとにかくボーダーボックスと一緒に動作しませんパディング右のトリックを推測している？
確かに、このトリックを行う最大/最小幅のコンボがありますか？
オリジナルポスト：
私はこの質問はthisのような、前の質問に似ている知っているが、鉱山は、はるかに狭いです。
具体的には、アンドロイドモバイルのFFとしてFirefoxデスクトップのソリューションを探しています。他のすべてのブラウザコンボは、スクロールバーをオフにするサポートされた簡単な方法を提供します。例えば： -
::-webkit-scrollbar {display:none;}
-ms-overflow-style: none;
そしてどんなフレキシボックスとのコンボボックスのサイズ変更は、他のすべてのUAの実装上（TM）動作します。 （下記の例/デモコードを参照してください）。
私はFFスクロールバーの幅を計算し、それをパディングとして追加することができますが、本当に必要ですか？
Q.廃止予定だったhereのため、Mozillaのどの項目も-moz-scrollbars-noneに置き換えられましたか？
図解問題： -
<!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>
のFirefox 57で修正されたHTML、本体{オーバーフロー：隠された;}これは、依然としてアルバロをスクロールしなければならない –
。 – McMurphy
そしてブロックスクロールイベント –