带有iScroll.js的iOS动画锚滚动方法

Question

我使用iScoll.js帮助在iOS上滚动动画。 基本上，它使用硬件加速的CSS属性来移动内容，而不是传统的滚动。

iScoll运作良好，但我也在尝试实现平滑的滚动锚点解决方案。

它在台式机上运行良好，但问题是我无法锻炼如何检索正确的偏移值以传递给iScoll实例。 我觉得我非常接近解决方案：

var ua = navigator.userAgent,
    isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua);

if (isMobileWebkit) {
      iScrollInstance = new iScroll('wrapper');
}


$('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
            || location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
               if (target.length) {
                   if (isMobileWebkit) {
                       iScrollInstance.refresh();
/* issue here with "target.position.top" = "undefined" */
                       iScrollInstance.scrollTo(0, target.position.top, 1000);
                   }else{
                        $('html,body').animate({
                        scrollTop: target.offset().top
                        }, 1000);
                   }
                return false;
            }
        }
    });

完整的演示在这里http://jsfiddle.net/Wccev/3/

Answer 1

不知道为什么，但是iScroll.js似乎不喜欢scrollTo函数中的jQuery。 因此，提前设置变量似乎有所帮助。 我还必须计算出正确的偏移量，因为iScroll会移动div而不是屏幕。

如果有人需要，只要您正确设置了iScroll，此jQuery应该有助于在IO设备上平滑地滚动锚点：

var ua = navigator.userAgent,
    isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua);

if (isMobileWebkit) {
    $('html').addClass('mobile');
}   

$('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
            || location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
               if (target.length) {
                   if (isMobileWebkit) {
                        scrollOffset = $('#scroller').position().top;
                        targetOffset = target.offset().top;
                        iScrollInstance.refresh();
                        iScrollInstance.scrollTo(0, -(targetOffset-scrollOffset), 1000);
                   }else{
                        $('html,body').animate({
                        scrollTop: target.offset().top
                        }, 1000);
                   }
                return false;
            }
        }
    });