Question

我一直在努力解决这个问题。我在新网站上使用skrollr，它在桌面上运行良好。然而，在将设备从横向转换为纵向或反之后，内容在ipad和Android触摸设备上被切断。它与此处描述的问题非常相似：Skrollr cutoff on iPad，但他们推荐的解决方案并没有为我解决问题。

这可以通过在skrollr-body div的底部添加填充来修复，但需要的数量在纵向和横向之间变化。该页面在更改时似乎需要刷新，因此CSS和媒体查询当时不会为我剪切。

有什么想法吗？真的在挖掘Skrollr，但这让我发疯了。

以下是查看的链接： http://rweststaging.com/stackoverflow/test.php

以下是基本代码：

// Top fixed section
<div id="animation"
data-0p="position:fixed; top:0%;"
data-100p="position:fixed; top:0%;"
data-120p="position:fixed; top:0%;"
data-210p="position:fixed;  top:-130%; opacity:1; display:block;"
data-220p="opacity:0; display:none;"
>
</div>

//lower content section
<div id="skrollr-body" 
style="position: absolute; top: 220%; width: 100%;" 
data-top="" data-bottom=""
>
    //content sections go here
</div> // end skrollr body

//skroller init 
skroll = skrollr.init({
     // mobileCheck:function(){return false;},
     forceHeight:false,
     smoothScrolling: true,
     smoothScrollingDuration: 600
});

Answer 1

我通过没有#skrollr-body div独立来解决问题（因为这在检测移动时会继承新功能）。

所以尝试用你的div包围#skrollr-body div -

// Top fixed section ...

<div id="skrollr-body" style=""> // no styles
    <div class="nonfixed" style="position:absolute; top:220%; width:100%;">
    // all non-fixed elements
    </div>
</div>

Skrollr高度问题/内容在iPad和触控设备上被切断

1 个答案: