Javascript 删除Firefox桌面上的滚动条
编辑2： 另见 编辑1： 来吧？我猜正确的填充技巧无论如何对边框框不起作用 当然有一些最大/最小宽度的组合会起作用吗 原职： 我知道这个问题和以前的问题类似，但我的问题要窄得多 具体地说，我只是在寻找一个解决方案，将Firefox桌面作为android mobile上的FF，而所有其他浏览器组合都提供了一个受支持的、简单的关闭滚动条的方法。例如：-Javascript 删除Firefox桌面上的滚动条,javascript,css,firefox,web-applications,scrollbar,Javascript,Css,Firefox,Web Applications,Scrollbar,编辑2： 另见 编辑1： 来吧？我猜正确的填充技巧无论如何对边框框不起作用 当然有一些最大/最小宽度的组合会起作用吗 原职： 我知道这个问题和以前的问题类似，但我的问题要窄得多 具体地说，我只是在寻找一个解决方案，将Firefox桌面作为android mobile上的FF，而所有其他浏览器组合都提供了一个受支持的、简单的关闭滚动条的方法。例如：- ::-webkit-scrollbar {display:none;} -ms-overflow-style: none; 而无论
::-webkit-scrollbar {display:none;}
-ms-overflow-style: 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>
*，*：之前，*：之后{
框大小：继承；
}
html，正文{
高度：100vh；
保证金：0；
框大小：边框框；
字体大小：16px；
-ms溢出样式：无；
}
.顶杆{
显示器：flex；
宽度：100%；
对齐项目：居中；
}
.集装箱{
利润率：15px；
填充：15px；
显示器：flex；
弹性：2；
背景颜色：黄色；
}
.containerrow2{
利润率：15px；
填充：15px；
显示器：flex；
弹性：17；
背景色：aliceblue；
最小高度：0；/*新建；解决Firefox错误*/
最小宽度：0；/*新建；解决Firefox错误*/
}
.W3{
填充：15px；
显示器：flex；
弹性：1；
背景颜色：黄色；
}
.外部容器{
显示器：flex；
弯曲方向：立柱；
背景色：黑色；
高度：100%；/*新*/
}
.科{
显示器：flex；
弯曲方向：立柱；
背景色：aliceblue；
高度：100vh；
盒影：嵌入0.8px橙色；
填充物：5px；
}
主要{
宽度：100%；
身高：100%；
溢出：自动；
}
#myDIV{
显示：块；
身高：100%；
宽度：100%；
溢出x：隐藏；
边框：3倍纯绿；
溢出y：自动；
右侧焊盘：25px；
}
#myDIV2{
身高：100%；
宽度：100%；
溢出x：隐藏；
边框：3倍纯绿；
溢出y：自动；
框大小：边框框；
右侧焊盘：25px；
}
#listDiv{
高度：800px；
宽度：2000px；
背景颜色：珊瑚；
}
函数myFunction（）{
var elmnt=document.getElementById（“myDIV”）；
var x=elmnt.offsetHeight；
变量y=elmnt.scrollTop；
document.getElementById（“demo”）.innerHTML=“水平方向：+x+”px
垂直方向：+y+”px”；
}
废话
在我里面滚动！
很多东西
www
页脚