更新:スクローラーを希望どおりに機能させることができましたが、実際の問題をハッキングしたような気がします。誰かがより確かな答えを持っていれば、それを気に入っていただけると思います。新しいjQueryの下のスニペットに更新してメモしましたm を使用しています。
iPad/Android Web アプリにiScroll-4 ( http://cubiq.org/iscroll-4 ) を使用しています。すべてがスワイプとスクロールで完全に機能していますが、アプリの冒頭に目次があります。ユーザーがスクローラーの特定の領域にジャンプできるようにする --
scrollToElement(element, duration)
別の領域にジャンプするためにiScroll 関数を使用しています。またscrollToPage(page, duration)
、ユーザーが一度に 1 ページずつ手動で前後に移動できるようにするためにも使用します。
コンソールを見ている間currPageX
、関数を使用してナビゲートしたscrollToPage
ときやスワイプしたときに変数の更新がログに記録されますがscrollToElement
、currPageX
変数を使用すると更新されません。
したがって、要素にジャンプしてから前方に移動すると、scrollToPage('next', 0)
後方に移動し、目次の後の次のページに移動します。
scroll.refresh()
関数を after scrollToElement
、 before 、関数を timeout 内に入れるなどして使用しようとしましたが、currPageX
が更新されない理由がわかりません。
2 つの異なる関数を使用している jQuery コードのスニペットを次に示します。
// TO NAVIGATE FORWARD AND BACKWARDS
$('span.control').on('click', function() {
var slideDir = $(this).attr('data-dir');
if (slideDir == 'prev') {
var tehPg = tehScroll.currPageX-1;
} else if (slideDir == 'next') {
var tehPg = tehScroll.currPageX+1;
}
tehScroll.scrollToPage(tehPg, 0);
return false;
});
// TO JUMP FROM CONTENTS
$('li[data-page="toc"] span').on('click', function() {
var toPage = $(this).attr('data-page');
tehScroll.scrollToElement('li[data-page="'+toPage+'"]', 800);
// ADDED THE FOLLOWING LINE TO MANUALLY SET currPageX after scrolling!
tehScroll.currPageX = $('#slides li[data-page="'+toPage+'"]').index();
return false;
});