帶有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;
            }
        }
    });