このトピックについて投稿された元の質問であるため、この質問に答えています。ここでの問題は、使用による顕著なちらつきwindow.scrollTo()、jQuery's scrollTop()または$.mobile.silentScroll()JQM ライブラリ (タイムアウト + スクロール) からの物議を醸すものであることを明確に述べています。
私は最近、まったく同じ問題に対処する必要がありました。それが私が思いついたものです。優れた JQM チームは、過去にローエンドのモバイル デバイスの移行を最適化および高速化するために素晴らしい仕事をしました。
pages要するに、この重要な点は、関数内で を特定の値にペアリングしようとすることで、JQM によって何らかの方法で解決されました§.mobile.silentScroll()。自分でビルドするには、この関数を削除する必要がありました。
$(document).on("mobileinit", function () {
// other settings...
$.mobile.SerialTransition.prototype.scrollPage = $.noop;
$.mobile.ConcurrentTransition.prototype.scrollPage = $.noop;
});
スクロール位置を覚えておく必要がある最初のページ (リスト ページ) と、常に上から開始する必要がある 2 番目のページ (カード ページ) の 2 種類のページがあるため、この情報をカスタム フォルダー内に保存します。data-attribute.
たとえば、以下の例の 3 つのページの設定は次のとおりです。
<div id="page-one" data-role="page" data-transition-scroll="keep-position">
<div id="page-two" data-role="page" data-transition-scroll="top-position">
<div id="page-three" data-role="page" data-transition-scroll="keep-position">
質問で指摘したようにpage、上からオフセットする必要もありました。これがコード全体です。
var scrollHandler = {
setScrollData: function (prevPage, toPage) {
if(typeof toPage == "object" && typeof prevPage == "object") {
$(prevPage).data("scroll-top", $(window).scrollTop());
}
},
resetContent: function (toPage) {
var scrollMode = $(toPage).data("transition-scroll");
if(scrollMode === "top-position") {
var content = $(toPage).find(".ui-content")[0];
var contentStyle = $(content).attr("style"); /* Force reflow */
$(content).css({"top": "0px"});
}
},
freezeContent: function (prevPage) {
var scrollTop = $(prevPage).data("scroll-top"),
content = $(prevPage).find(".ui-content")[0],
fixedHeader = $(prevPage).find(".ui-header-fixed")[0],
headerBottom = $(fixedHeader).outerHeight() - fixedHeader.offsetTop;
$(content).css({"top": -scrollTop + "px"});
window.scrollTo(0,0);
},
unFreezeContent: function (toPage) {
var scrollTop = $(toPage).data("scroll-top"),
scrollMode = $(toPage).data("transition-scroll"),
content = $(toPage).find(".ui-content")[0],
contentStyle = $(content).attr("style"); /* Force reflow */
$(content).removeAttr("style");
window.scrollTo(0, scrollMode ==="top-position" ? 0 : scrollTop);
}
};
ここで使用されるJQMpageeventsは次のとおりです。
$(document).on("pagecontainerbeforehide", function(e, ui) {
scrollHandler.freezeContent(ui.prevPage);
});
$(document).on("pagecontainerbeforechange", function(e, ui) {
scrollHandler.setScrollData(ui.prevPage, ui.toPage);
});
$(document).on("pagecontainerbeforeshow", function(e, ui) {
scrollHandler.resetContent(ui.toPage);
});
$(document).on("pagecontainershow", function(e, ui) {
scrollHandler.unFreezeContent(ui.toPage);
});
最後に、CSS も少しあります。
/* large desktop screen */
.ui-header,
.ui-content,
.ui-footer {
max-width: 870px;
margin: auto;
}
/* needed for the scrollhandler */
.ui-content {
position: relative;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
追記事項
外部ページおよびdom-cachedではないページの場合、次の理由により、カスタム ページ履歴が必要になります。
- 私の例では、スクロール値はページ自体の中に保存され、
- 現在の標準の JQM ページ履歴の実装では、この目的には十分ではありません
次に例を示します。
結果を調べるために、slide遷移は意図的に遅くされています。
