删除滚动条 Firefox 桌面答案

【问题标题】：Remove scrollbars Firefox desktop删除滚动条 Firefox 桌面
【发布时间】：2017-12-31 09:02:37
【问题描述】：

编辑 2：

另见Mozilla bug

编辑 1：

来吧？我猜 padding-right 技巧无论如何都不适用于边框框？

肯定有一些 max/min -width 的组合可以解决问题吗？

原帖：

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

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

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

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

现在我可以计算 FF 滚动条宽度并将其添加为填充，但我真的必须这样做吗？

问。自从 -moz-scrollbars-none 被弃用 here 后，Mozilla 的任何东西都被替换了吗？

图解问题：-

<!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>

【问题讨论】：

html，正文 {overflow:hidden;}
它仍然需要滚动 Alvaro。
然后阻止滚动事件
有 2 个滚动条，您要禁用哪一个？
两者/全部我会满足于一个解决方案，但请暂停并理解问题

标签： javascript css firefox web-applications scrollbar

【解决方案1】：

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

【讨论】：