我有一个页面的主体和HTML高度为100%,当它加载到Chrome Android上时,我可以看到地址栏,但我可以向上滑动,栏隐藏起来。页面显示的底部部分,当栏是可见的时候,不见了。
在Firefox Android上,地址栏顽固地保持固定,不想隐藏。当然,它是在向下推页面,所以页面底部的一部分是不可见的。无论是默认模式下的地址栏(底部)还是顶部的地址栏都会出现这种情况。
超文本:
<body>
<div data-scroll-container class="wrapper">
<div data-scroll-section class="bg">
<div data-scroll data-scroll-sticky id="navigation"></div>
<div data-scroll data-scroll-direction="vertical" data-scroll-speed="-1" class="elements moon"></div>
</div>
</div>
</body>
CSS:
html,body {
height: 100%;
}
.bg {
width: 200vw;
height: 100%;
background: url(../img/sky.jpg) center/cover no-repeat;
position: relative;
}
.elements {
position: absolute;
}
#navigation {
background: url(../img/navigation.png) center left / contain no-repeat;
height: 100%;
width: 100%;
left: 0;
position: absolute;
}
.moon {
background: url(../img/moon.png) no-repeat;
height: 300px;
width: 300px;
top: -5%;
left: 700px;
mix-blend-mode: screen;
}
可能是什么问题?我应该如何解决这个问题?
顺便说一句,我使用火车头视差JS脚本进行水平滚动,以防你想知道div标签中的数据是什么。
body {
overflow: hidden;
}
.wrapper {
height: 100vh;
display: inline-block;
white-space: nowrap;
min-height: 100vh;
}
1条答案
按热度按时间wnavrhmk1#
这就是导致问题的原因:
浏览器使用主体溢出滚动条来决定是否隐藏导航栏。使
body
溢出,导航栏应该开始隐藏。