Javascript 移动滚动事件:滚动屏幕时的动画
我想做一个动画时,滚动顶部在一个特定的值,如500 我使用CSS3和一些事件监听器来完成这个动画 这是javascript代码:Javascript 移动滚动事件:滚动屏幕时的动画,javascript,css,mobile,scroll,touch,Javascript,Css,Mobile,Scroll,Touch,我想做一个动画时,滚动顶部在一个特定的值,如500 我使用CSS3和一些事件监听器来完成这个动画 这是javascript代码: $(window).on("scroll",animation); $(window).on("touchmove",animation); var oldscroll = 0; function animation(){ var derection; if (oldscroll - $("body").
$(window).on("scroll",animation);
$(window).on("touchmove",animation);
var oldscroll = 0;
function animation(){
var derection;
if (oldscroll - $("body").scrollTop() < 0){
derection = 1;
}else if(oldscroll - $("body").scrollTop() > 0){
derection = -1;
}else{
derection = 0;
}
if($("body").scrollTop() >=50 && derection == 1){
$("nav ul").removeClass("animate_ul_back");
$("nav ul").addClass("animate_ul");
$("nav").addClass("animate_nav");
}else if($("body").scrollTop() <= 50 && derection == -1){
$("nav ul").removeClass("animate_ul");
$("nav ul").addClass("animate_ul_back");
$("nav").removeClass("animate_nav");
}
oldscroll = $("body").scrollTop();
}
html:
然而,即使在iphoneIOS7的browsersafari中,简单的动画也将推迟到滚动完成
我知道问题在于事件侦听器滚动和触摸移动
如果存在类似滚动的事件侦听器,如何解决此问题
我已经尝试过setTimeout、setInterval或requestanimationframe。当文档滚动且我的手指离开屏幕时,它们不起作用
首先是这些。这个问题得到了解决。这似乎与IOS测试版和系统上应用程序的webview之间的兼容性有关。
.animate_nav{
position:fixed;
top:0px;
z-index: 100;
}
.animate_ul{
-webkit-animation: ulmove 0.2s 0s;
left:12px;
}
.animate_ul_back{
-webkit-animation: ulmoveback 0.2s 0s;
left:-46px;
}
@-webkit-keyframes ulmove{
from{
left:-46px;
}
to{
left:12px;
}
}
@-webkit-keyframes ulmoveback{
from{
left:12px;
}
to{
left:-46px;
}
}
<nav>
<ul class="clearfix">
<li class="logo_min"><img src="images/logo_animate.png"></li>
<li class=""><a href="#" class="current">首页</a></li>
<li class=""><a href="#">a</a></li>
<li class=""><a href="#">b</a></li>
<li class=""><a href="#">c</a></li>
</ul>
</nav>