在移动设备上使用skrollr时,网站无法完全滚动
Website not completely scrollable when using skrollr on mobile
我很难让skrollr在移动浏览器上工作:在我的台式电脑上,一切都很好,但当使用iOS版Safari时,我的页面无法完全滚动。你可以滚动到第二段,但不能再滚动了。
我已经在iOS上的Safari上测试过了,但没有在任何其他移动浏览器上测试过。
矛盾的是,它在我创建的jsfiddle预览版上运行良好:http://jsfiddle.net/gatL4ttn/3/http://jsfiddle.net/gatL4ttn/3/embedded/result/
它不适用于我的自托管版本:http://www.finiam.de/test
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target=".gap"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-100"
style="background-image:url(http://placekitten.com/g/2000/1000)"
data-anchor-target=".gap"
data-bottom-top="transform: translate3d(0px, -80%, 0px);"
data-top-bottom="transform: translate3d(0px, 80%, 0px);">
</div>
<!--the +/-80% translation can be adjusted to control the speed difference of the image-->
</div>
<div id="skrollr-body">
<div class="gap gap-100" style="background-image:url(http://placekitten.com/g/2000/1000);">
<div class="row">
<div id="abc" class="col-sm-6 col-sm-offset-3">
<h1>Lorem Ipsum Dolor Sit Amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<a href="#" class="btn btn-default" title="Lorem Ipsum Dolor Sit Amet.">A Hyperlink</a>
</div>
</div>
</div>
<div class="content" id="main">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1>Lorem Ipsum</h1>
<p>
Donec dui ante, posuere sit amet rutrum vel, suscipit lacinia nisl. Praesent euismod erat sed tempor iaculis. Integer luctus est vel nulla dapibus porttitor sit amet eget ante. Nullam eleifend leo lacinia rutrum gravida. Nunc convallis, lacus sed malesuada gravida, justo urna aliquam mi, sit amet sollicitudin lacus urna non mauris. Vivamus a ante a lectus vestibulum aliquam et quis sapien. Vivamus nec augue interdum, mollis risus eu, tempor libero. Curabitur at tempus dui. Mauris cursus massa at sodales semper. Aenean varius dui consectetur enim sagittis consectetur.
</p>
<p>
Bla Bla Bla Bla
</p>
</div>
</div>
</div>
</div>
这让我抓狂,我们将不胜感激。
Nico,
看起来好像skrollr主体与名为gap的div混淆了。试试这个:
从.gapdiv中删除.rowdiv,然后完全删除.gapdiv。
在.row:的底部添加200px的填充(或者无论你的设计有多少作品)
.row{ padding-bottom: 200px; }
去掉.gap后,再加上row元素上的填充,就可以合成所需内容了。
我怀疑.gap是问题所在,因为当我在Chrome中检查元素时,它只在.gapdiv.
相关文章:
- 在向下滚动JS/HTML/CSS wordpress网站时替换徽标图像
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- 网站跟随鼠标滚动
- 像谷歌一样更改滚动网站
- 网站水平滚动,但单独的页面
- 我如何从一个无限滚动的网站抓取图像,其中api是隐藏的,我无法通过使用Inspect Element获得它->网络
- 我想要一个类似于网站 https://onlycoin.com/ 的jQuery鼠标滚动动画效果
- 每次我按下按钮时,网站都会向上滚动
- 在用户滚动时加载单个页面网站的不同部分
- 有没有可能使网站水平和垂直滚动
- 单页,滚动网站与固定的动态页脚
- 为网站滚动添加效果
- 新颂网站 - 滚动时从一个背景图像平滑过渡到下一个背景图像
- 如何使网站滚动背景不移动和工具栏自动最小化
- 启用/禁用iPhone/iPad的滚动,但启用网站滚动
- Nexus 5网站-滚动滑块内的设备-如何做到这一点
- 移动版网站滚动缓慢
- 防止网站滚动的Jquery功能
- 移动网站滚动问题
- 网站滚动问题