Skroller 在手机上创建大空 space

Question

我在页面上使用 skroller。移动设备上的页面显示一个大 space，在您第一次滚动它后无法滚动。访问了很多提供解决方案的网站，包括 Whosebug 和@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 的一些事情：

您需要真正了解移动浏览器和桌面浏览器之间的区别。
需要特别注意的是移动布局视口与视觉视口。我将从这里开始 http://www.quirksmode.org/mobile/viewports.html, and here http://www.quirksmode.org/mobile/viewports2.html

However, the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.Thus the element takes the width of the layout viewport initially, and your CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser.

How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.

这是一件大事。如果您的桌面和移动布局/视觉视口大小相同，那么您可以使用触摸系统使您的网站在移动设备上具有基本功能。它的外观和功能与桌面滚动非常相似。
如果这些视口的宽度差异很大，那就不行了。我有一个完全受高度控制的网站，所以我运气不好。我最终在页面底部添加了几个 'static' 屏幕。我添加了两个类（.my_website_mobile 和 .my_website_desktop），我会根据需要 display: block; 或 display: none;。我不喜欢那样做，但它奏效了。
在移动设备上，带有背景图像的 div 不能有 background-position: fixed 这在桌面浏览器移动模拟器工具上运行良好，但在真实移动设备上会非常失败。（惨痛的教训……）
其他功能可能在移动设备上有奇怪的表现：溢出和视觉视口我使用了很多 vw（视口宽度）和 vh（视口高度）高度而不是位置的 %和大小。这些在桌面设备上有意义，但在移动设备上则不然。
提醒，skrollr-body 在 skrollr 初始化时得到 style="-webkit-transform: translate(0px, 0px) translateZ(0px); transform: translate(0px, 0px) translateZ(0px);"。
如果您使用的是移动设备，则： <html class="skrollr skrollr-mobile" style="overflow: hidden;" > 和 <body style="overflow: hidden;"> 在 skrollr 初始化之后。
如果您使用的是桌面设备，则： <html class="skrollr skrollr-desktop"> 和 <body style="height: 12345px;"> 在 skrollr 初始化之后。

我没有深入研究您的具体代码，但如果您想了解更多信息，请通过电子邮件与我联系（查看我的个人资料...）我完全愿意。在我能够对您的代码进行故障排除之前，我需要更改机器和我的位置...

Skroller 在手机上创建大空 space

Skroller creating large empty space on mobile phones

skrollr