我的客户需要一个文章滚动器,它将传出的文章留在当前滚动位置,并将新文章放在顶部。
我使用 CSS3 转换实现了这一点,方法是将传出文章的上边距设置为等于当前 $(window).scrollTop() 值的负值,然后使用 $(window).scrollTop(0 将页面滚动到顶部)。幻灯片完成后,我将外发文章的上边距重置为零,为下一次过渡做好准备。我在这里上传了一个简化的例子http://www.siblify.com/stackslider/但这里是专门管理“下一个”点击滚动的代码。
#container {
height:auto;
width:800px;
position:relative;
overflow:hidden;
margin:0 auto;
padding:60px 0 20px;
}
.slidePanel {
position:absolute;
left:0;
top:0;
width:760px;
z-index:900;
background:grey;
-webkit-transition:left .5s ease-in-out;
-moz-transition:left .5s ease-in-out;
-o-transition:left .5s ease-in-out;
padding:60px 20px 20px;
}
.prevPanel {
left:-800px;
}
.currentPanel {
z-index:1000;
display:block;
}
.nextPanel {
left:800px;
}
div.sliding {
left:0;
}
div.slidingOffLeft {
left:-840px;
}
div.slidingOffRight {
left:840px;
}
<div id="controls">
<a href="prev">Prev</a> <a href="next">Next</a>
</div>
<div id="container">
<div class="prevPanel slidePanel">
<!-- content here -->
</div>
<div class="currentPanel slidePanel">
<!-- content here -->
</div>
<div class="nextPanel slidePanel">
<!-- content here -->
</div>
</div>
$('a[href="next"]').click(function(i) {
i.preventDefault();
$('.prevPanel').remove();
$('.currentPanel').css({
"margin-top": "-" + $(window).scrollTop() + "px"
});
$(window).scrollTop(0);
$('.currentPanel').addClass('slidingOffLeft').delay(500).removeClass('slidingOffLeft currentPanel').addClass('prevPanel');
$('.nextPanel').addClass('sliding').delay(500).removeClass('sliding nextPanel').addClass('currentPanel');
setTimeout(function() {
$('#container').height($('.currentPanel').height());
$('.prevPanel').css({
'margin-top': '0px'
});
}, 500)
})
此方法在桌面浏览器上完美运行,但在 iPad 上添加负边距和 $(window).scrollTop(0) 不会立即发生,因此在文章被拉回之前,当窗口滚动到顶部时,您会看到轻微的光点到位。
任何关于如何让这两个事件在 iOS 上同时触发的建议或可以提高性能的替代方法将不胜感激。
注意:在我的示例中,“上一个”和“下一个”按钮在点击时会跳下页面。这是一个已知的 iOS 固定定位错误,在这个项目中对我来说不是问题,因为最终版本将是手势控制的。