Question

下面的代码包含链接，点击这些链接会将正文的scrollTop设置为400或600.它在台式机上工作正常，但在iOS Safari上没有。滚动动画正在运行，但动画以某种方式禁用了click事件侦听器。用户必须执行某些操作（如手动滚动页面）以重新启用单击事件。

要模拟问题，请单击第一个链接，然后页面将向下滚动。之后，单击另一个链接，这次（在iOS safari上），链接点击不再起作用。尝试向下滚动一下，链接将再次运行。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style>
#test, #test2 {
    float: left;
    position: fixed;
    top: 200;
}
#test2 {
    top: 250;
}

#job{
    float: left;
    width: 300px;
    margin-left: 200px;
}
</style>

<script>
    $(function(){
        $("#test").click(function(e){
            e.preventDefault();
            $('body').animate({scrollTop: 400});
        });

        $("#test2").click(function(e){
            e.preventDefault();
            $('body').animate({scrollTop: 600});
        });
    });
</script>


<a href="#job" id="test"> Test one</a>
<a href="#job" id="test2"> Test two</a>

<div id="job">
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

</div>

我该如何解决这个问题？

Answer 1

尝试同时指定html，这是您通常看到的动画滚动作为跨浏览器的修复工具：

$('html, body').animate.....

Jquery animate scrollTop导致click事件停止在IOS safari上运行

1 个答案: