jQuery 平滑滚动在 iPad 和 iPhone 上不起作用

Posted

技术标签:

【中文标题】jQuery 平滑滚动在 iPad 和 iPhone 上不起作用【英文标题】:jQuery smooth scroll doesn't work on iPad and iPhone 【发布时间】:2012-09-02 10:54:33 【问题描述】:

我使用了 jquery 平滑滚动效果,没什么花哨的..只是 jQuery...它似乎不适用于 iPad 或 iPhone 或任何其他平板电脑..网址在这里:http://teothemes.com/wp/viewpoint/

这是我用于 jquery 平滑滚动的代码:

jQuery(document).ready(function() 
jQuery("a[href*=#]").on('click', function() 
  if(parseInt(jQuery(this.hash).offset().top) !== parseInt(jQuery(window).scrollTop()))
    jQuery('html,body').animate(scrollTop:jQuery(this.hash).offset().top, 1500);
);

);

如果有人有任何想法,非常感谢。

【问题讨论】:

您好,您找到解决方案了吗? 【参考方案1】:

您是否尝试过 CSS 属性 -webkit-overflow-scrolling:touch;?

【讨论】:

【参考方案2】:

我读过这是一个 ios 6.1 问题,它似乎没有在 iOS 7 的最早版本中得到修复。实际上并没有一个可靠且简单的解决方案,所以作为一种解决方法,我正在使用Gentle Anchors 当检测到 iPhone 和 iPod 时,如果我发现其他设备需要它,我会更新这篇文章。

    $('html, body').stop().animate(
        'scrollTop': $target.offset().top , 1000);
    if( /iPhone|iPod/i.test(navigator.userAgent) ) 
        Gentle_Anchors.Setup(target);
        //for iPhone & iPod 
    

不幸的是,如果检测到这些设备之一,除非我告诉页面在<head> 中将视口设置为等于 iPhone 的纵向宽度,否则我会看到一些卡顿。

【讨论】:

【参考方案3】:

$(document).ready(function() 

    $('.nav-wrapper ul li a').click(function(e)  
    $('html,body').animate( scrollTop: jQuery(this.hash).offset().top-134, 500);
);

【讨论】:

以上是关于jQuery 平滑滚动在 iPad 和 iPhone 上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

如何使我的固定位置文章滑块在 iPad 上平滑

将滚动条添加到 iPad 和 iPhone 的 div 的最佳方法是啥?

如何在ipad和iphone中固定背景图像不滚动位置固定[重复]

jquery垂直鼠标滚轮平滑滚动

jQuery平滑滚动

jquery怎么实现平滑滚动效果 就是随着滚动条而滚动