Skroller在手机上创造巨大的空白空间

Question

我在一个页面上使用skroller。移动设备上的页面显示了一个很大的空间，在你第一次滚动它之后是不可滚动的。访问了很多提供解决方案的网站，包括StackOverflow和@Prinzhorn自己的评论，但我无法在移动设备(Android, iPhone)上解决这个问题。这里是HTML:

<div id="skrollr-body">
<div id="eidwish1" class="centered" data-300="width:100%; background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));" data-2000="width:0%; background-image:linear-gradient(3600deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));"><h1 class="text-center heading2 wow fadeInDown" data-0="display:block;" data-1500="display:none;">This Eid send your loved ones...</h1></div>
<div id="eidwish2" class="centered" data-2000="width:100%;" data-2500="width:0%;"><h1 class="text-center heading2 wow fadeInUp" data-0="background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));" data-2500="background-image:linear-gradient(3600deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));">a personalized Greeting Card!</h1>
<div id="crescent" class="centered" data-1500="top:-100px;" data-2000="top:-200px;"></div>
</div>
<div id="ribbon-left" class="ribbon" data-2500="width:0%;" data-3500="width:50%;"></div>
<div id="ribbon-right" class="ribbon" data-2500="width:0%;" data-3500="width:50%;"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="337px" height="200px">
</svg>
<div id="pattern1" class="centered" data-2500=" height:100%; "data-3500="height:0%;"></div>
<div id="pattern2" class="centered"></div>
<div id="eidwish3" class="centered" data-4000="width:0px;height:0px; "data-5000="width:700px;height:700px;"></div>
<h1 class="text-center headerUp wow lightSpeedIn" data-0="display:none;" data-4000="display:block;"><img src="logo.png" alt="logo"/><span clss="toggle-green">THINK GREEN </span><span class="toggle-blue">PRINT GREEN</span></br><small><i>use "EID-2015" promo code when you checkout</i></small></h1>
<h1 class="text-center discount wow rollIn" data-0="display:none;" data-4000="display:block;">We are Giving Away 25% discount</h1>
<a class="button btn-success buy-now text-center wow jello" data-wow-iteration="10" data-wow-duration="3000ms" data-0="display:none;" data-4000="display:block;" href="Greeting Cards">See All Card Designs</a>
<a class="copyright" href="http://example.com">
<img src="http://example.com/logo.png" alt="logo"/>
<br>Copyright © example.com 2015-16</a>
</div>

这是JS:

<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init({
forceHeight: false
});

CSS:

和

html, body {padding:0;margin:0;
k}
body {overflow:auto; height:7600px; 
}
#skrollr-body {min-height: 1px; float: left; width:100%; height:100%; 
}
#skrollrk-body  div {overflow:hidden; position:absolute; 
}
.centered { top:0; bottom:0; left:0; right:0; margin:auto; 
}
#eidwish1 {background: #000 center center no-repeat ; z-index:5;
}
#eidwish2 {background: #000 url('wish2.png') center bottom no-repeat ; z-index:4; box-shadow: 0 0 0 20px #FF0000;  background-size: cover;
}
#crescent {width:100%; background:url('crescent2.png') no-repeat; margin-top:0px;
}
#pattern1 { background:url('wish3.jpg') ; z-index:2; background-attachment:fixed; background-size: cover;
}
.ribbon {background:#FF0000; height:40px; top:50%; margin-top:-20px; z-index:3;}
#ribbon-left {left:0
}
#ribbon-right {right:0
}
small { color: #fff;
}
svg {position:absolute; z-index:5; left:50%;  top:50%; margin-left:-170px; margin-top:-180px
}
#pattern2 { background:url('wish4.jpg'); z-index:1; background-size: cover
}
#eidwish3 {background:#FF0000 url('wish5.jpg') no-repeat center center; z-index:10; border-radius:50%;  background-size: cover
}

我被困在这个问题上很多天了。我读了几乎所有关于这个的帖子，并试图做同样的事情，但这并不能解决我的问题。请求帮助!

Answer 1

在这个问题上我完全同意你的看法。哦，我多么希望我能和别人谈谈skrollr。以下是我对Skrollr和Mobile的一些了解:

• 你需要真正理解移动浏览器和桌面浏览器的区别。
• 特别注意的是移动布局视口vs视觉视口。我从这里开始http://www.quirksmode.org/mobile/viewports.html，这里http://www.quirksmode.org/mobile/viewports2.html

但是，CSS布局，特别是百分比宽度，是计算的相对于布局视窗，它比可视窗口。因此，元素采用布局的宽度视口初始化，CSS将被解释为好像屏幕是比手机屏幕宽很多。这确保了你的网站的布局和桌面浏览器一样。

布局视窗有多宽?这因浏览器而异。SafariiPhone使用980px, Opera使用850px, Android使用800px, IE使用974px。

• 这是一个相当大的问题。如果你的桌面和移动设备的布局/视觉视窗大小相同，那么你可以使用触摸系统使你的网站在移动设备上基本运行。它的外观和功能与桌面滚动非常相似。
• 如果这些视口的宽度差别很大，那就不行。我有一个完全受高度控制的网站，所以我很不幸。最后我在页面底部添加了一些"静态"屏幕。我增加了两个类。my_website_mobile和.my_website_desktop)我将display: block;或display: none;视情况而定。我不高兴这样做，但它工作。
• 在移动设备中，带有背景图像的div不能有background-position: fixed，这将在桌面浏览器移动模拟器工具上工作得很好，但在真正的移动设备上却会失败。(惨痛的教训…)
• 其他功能可能在移动设备上有奇怪的性能:溢出，和视觉视口我使用了很多vw(视口宽度)和vh(视口高度)高度，而不是%的位置和大小。这些在台式机上是有意义的，但在移动设备上却不是。
• 提示，skrollr初始化时，skrollr-body获取style="-webkit-transform: translate(0px, 0px) translateZ(0px); transform: translate(0px, 0px) translateZ(0px);"。
• 如果您是在移动设备上，则在skrollr初始化后:<html class="skrollr skrollr-mobile" style="overflow: hidden;" >和<body style="overflow: hidden;">。
• 如果您是桌面设备，则在skrollr初始化后:<html class="skrollr skrollr-desktop">和<body style="height: 12345px;">。

我没有深入研究你的具体代码，但如果你想说更多，通过电子邮件联系我(检查我的个人资料…)我完全同意。我需要改变机器和我的位置之前，我能够解决你的代码…