0

iOSでのアニメーションのスクロールを支援するためにiScoll.jsを使用しています。基本的に、従来のスクロールではなく、ハードウェアアクセラレーションされた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/

4

1 に答える 1

0

理由はわかりませんが、iScroll.jsはscrollTo関数のjQueryを好まなかったようです。したがって、事前に変数を設定しておくと役立つようです。また、iScrollが画面ではなくdivを移動する方法のため、正しいオフセットを計算する必要がありました。

誰かがそれを必要とする場合、このjQueryは、iScrollを正しくセットアップすれば、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;
            }
        }
    });
于 2013-03-19T14:16:28.360 に答える