我试图在我的网站上使用Skrollr。一切都很好,除了移动设备。手机上无法向下滚动页面。
我已经确定这是因为我已经将html
和body
标签设置为具有height: 100%
。如果我删除这个css然后移动版本工作良好。虽然这个css是关键的主要网站,所以我需要它在那里。是否有可能保持这个CSS,并有移动版本滚动正常工作?
JSFiddle
注意:我知道我可以使sections
固定,但这不会在我的网站上工作,因为网站上也有静态部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
section {
padding: 5%;
height:100%;
background-color: red;
width: 100%;
min-height: 100%;
overflow: hidden;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
vertical-align: middle;
position: relative;
}
</style>
</head>
<body id="skrollr-body">
<section data-0="background-color: rgb(0,0,0);" data-500="background-color: rgb(0,0,255);">
<div class="container vcenter">
<h1> Some VCENTRED long long long long long long long long long text </h1>
</div>
</section>
<section>
<div class="container vcenter">
<h1> Some VCENTRED long long long long long long long long long text </h1>
</div>
</section>
<script src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/skrollr.min.js"></script>
<!--[if IE]>
<script src="js/skrollr.ie.min.js"></script>
<![endif]-->
<script type="text/javascript">
skrollr.init({ forceHeight: false, smoothScrolling: false, mobileDeceleration: 0.004 });
</script>
</body>
</html>
解决方案: T04435的答案工作。这是如何修复的:
编辑:说得太快了,它可以在Android上运行,但不能在iOS上运行(特别是iPhone)。
@media screen and (max-width:767px){
html, body {
height: inherit;
}
section {
height:100vh;
min-height: 100vh;
}
}
据我所知,你所需要的是设置一个媒体查询来改变html,body height:100%在移动设备
@media screen and (max-width:767px){
html,body{
// you might need to play with the value to see
// which one fits toe your desired outcome
heigth:initial;
}
}
请检查这个@MEDIA,这样你就可以得到正确的值,上面的一个是你需要做的一个例子
希望这有助于 T04435