Question

我的PC_page网站的MOBILE_page存在问题：

正如你所看到的，如果你滚动页面，然后你点击屏幕左/右侧的下一个或上一个箭头，内容会在页面顶部滚动下一个/上一个内容。

我目前使用以下代码进入点击功能以获得效果：

$(function(){
   var cntWid = $('#content').width();
   var scrNum = $('#slider ul').length;
   $('#slider').width(cntWid*scrNum);   
   c = 0;

   $('#arrownext, #arrowprev').click(function(){ 
        var myId = this.id=='fa' ? c++ : c--;
        c = c===-1 ? scrNum-1 : c%scrNum;
        $('#slider').stop().animate({left: -c*cntWid, top:0}, 800); 
        $("html, body").animate({ scrollTop: 0 }, "fast"); 
        $('#slider').animate({ scrollTop: 0 }, "fast");                             
   });
});

因此PC页面没有这个问题。

可悲的是，当我使用箭头按钮时，同一页面的移动版本不会滚动到内容的顶部，因为在CSS文件中我将#slider div区域定义为：

-webkit-overflow-scrolling:touch;

因此，当我点击箭头时，页面向左或向右移动，但滚动的级别保持不变。我想在移动设备上滚动顶部看到内容设置，就像在PC版本中那样。不幸的是，我真的无法解决这个问题。

如果我不使用-webkit-overflow-scrolling：触摸移动设备上的滚动效果会失去其动量效果但是scrolltop：0可以正常工作。我想要两者兼得。

有什么建议吗？

问候

Matteo：）

Answer 1

这是因为移动设备无法识别click事件以解决此问题，因此会发生touchstart touchend事件：

$('yourselector').on('touchstart click', function(){
    $("html, body").animate({ scrollTop: 0 }, "fast");
});

scrollTop（）不适用于滚动：触摸

1 个答案: