Question

编辑2：

编辑1：

拜托？我猜测填充右边的技巧无论如何都不适用于border-box？

肯定会有一些最大/最小宽度的组合可以解决这个问题吗？

原帖：

我知道这个问题类似于之前的问题，例如this，但我的问题要窄得多。

具体来说，我只是在Android手机上寻找Firefox桌面解决方案作为FF，而所有其他浏览器组合提供了一种支持且简单的关闭滚动条的方法。例如： -

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

灵活盒和盒子大小的任何组合都适用于所有其他UA实现（tm）。（参见下面的示例/演示代码）。

现在我可以计算FF滚动条宽度并将其添加为填充但是我真的需要吗？

Q值。 Mozilla有没有取代-moz-scrollbars-none，因为它被弃用了here？

图解问题： -

<!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中的滚动条行为已修复

删除滚动条Firefox桌面

1 个答案: