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的一些内容：

您需要真正了解移动浏览器和桌面之间的差异。
特别值得注意的是Mobile Layout Viewport与Visual Viewport。我从这里开始http://www.quirksmode.org/mobile/viewports.html，在这里http://www.quirksmode.org/mobile/viewports2.html

但是，会计算CSS布局，尤其是百分比宽度   相对于布局视口，它比相对宽   视觉视口。因此元素采用布局的宽度   最初的视口，你的CSS被解释为屏幕   明显比手机屏幕宽。这确保了你的   网站的布局与桌面浏览器的布局相同。

布局视口有多宽？这与浏览器不同。苹果浏览器   iPhone使用980px，Opera 850px，Android WebKit 800px和IE 974px。

这是一个非常重要的事情。如果桌面和移动布局/视觉视口的大小相同，那么您可以使用触摸系统使您的网站在移动设备中基本上正常运行。它看起来和功能几乎就像桌面滚动一样。
如果这些视口的宽度差别很大，那就不行了。我有一个完全由高度控制的网站，所以我运气不好。我最后在页面底部添加了几个“静态”屏幕。我添加了两个类（.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);"。
如果您使用的是移动设备，则在skrollr初始化后：<html class="skrollr skrollr-mobile" style="overflow: hidden;" >和<body style="overflow: hidden;">。
如果您使用的是桌面设备，则在skrollr初始化后：<html class="skrollr skrollr-desktop">和<body style="height: 12345px;">。

我没有挖掘您的具体代码，但如果您想多谈，请通过电子邮件与我联系（查看我的个人资料......）我完全赞成。在我能够对代码进行故障排除之前，我需要更改机器和我的位置......

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

1 个答案: