2017-07-25 53 views
0

编辑2:删除滚动条的Firefox桌面

也见Mozilla bug

编辑1:

来吧?我猜猜这个填充右边的技巧无论如何都不适用于边框。

肯定有最大的一些组合/分钟-width,会做的伎俩?

原贴:

我知道这个问题是类似像以前this的问题,但我的是狭窄得多。

具体我只寻求在Android手机解决Firefox的桌面为FF,和所有其他的浏览器提供的连击关闭滚动条的支持和简单的方式。例如: -

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

而且不管的Flexi-框和组合框上浆只是作品(TM)上的所有其他的UA实现。 (请参阅下面的示例/演示代码)。

现在我可以计算FF滚动条的宽度,并添加作为填充但我真的有?

Q.有什么Mozilla的替代-moz-滚动条,没有因为它是过时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> 
+0

HTML,身体{溢出:隐藏;} –

+1

它仍然有滚动阿尔瓦罗。 – McMurphy

+0

然后阻止滚动事件 –

回答

0

滚动条的行为在Firefox 57固定