使用jQuery Mobile幻灯片过渡保持滚动位置

Question

我目前正在开发一个使用jQuery Mobile的移动网站。切换页面时，我使用幻灯片过渡。因为这些页面很长，需要滚动。

向下滚动并单击链接时，当页面在滑入新页面之前滚动到顶部时，会出现可见的跳转。由于在某些时候需要滚动到顶部时，这两个页面并排放置。

我尝试过的一件事是：我可以将新页面从顶部偏移，使其从页面滚动到的级别开始，并在动画完成时将偏移重置回0，但之后页面将保持向下滚动。如果我使用窗口。scrollTo或jQuery的scrollTop（）有一个明显的闪烁，固定标题最明显。

我还能做什么其他事情来保持旧页滚动而新页未滚动？

我已经在第三代iPod touch、iPhone 4和iPhone 4s上进行了测试，令人惊讶的是，迄今为止给我闪烁次数最少的设备是iPod touch。

Answer 1

只是把return放错了；在调用的javascript函数的末尾。

     function yourFunctionBeingCalled(){
       /*your code*/
       return false;
     }

您还可以使用preventDefault（）；或事件。stopPropagation（）；功能

参考：事件。preventDefault（）vs.return false

希望有帮助。

Answer 2

我之所以回答这个问题，是因为这是关于这个主题的原始问题，并且清楚地指出，这里的问题是使用窗口时出现的明显闪烁。scrollTo（），jQuery的scrollTop（）或备受争议的$。可移动的JQM库中的silentScroll（）（超时滚动）。

我最近不得不解决完全相同的问题，这就是我提出的：伟大的JQM团队过去在优化和加速低端移动设备的过渡方面做得很好。

简言之，JQM通过尝试将页面与§§§§§§§§§§§§§§§§中的某个值配对，以某种方式解决了这个临界点。可移动的silentScroll（）函数。我必须删除此函数才能构建自己的：

$(document).on("mobileinit", function () {
  // other settings...
  $.mobile.SerialTransition.prototype.scrollPage = $.noop;
  $.mobile.ConcurrentTransition.prototype.scrollPage = $.noop;
});

由于我有两种页面，第一种页面需要记住滚动位置（列表页面），第二种页面（卡片页面），需要始终从顶部开始，因此我将此信息存储在自定义数据属性中。

例如，下面是我的示例中三个页面的设置：

<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">

正如问题中所指出的，我还必须从顶部偏移页面，这就是全部代码：

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

此处使用的JQM页面事件如下：

$(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缓存的页面，需要自定义页面历史记录，因为：

1. 在我的示例中，滚动值存储在页面本身中，并且

以下是一个示例：

为了检查结果，特意放慢了幻灯片的转换速度：

Answer 3

只需添加此CSS

div[data-role='page'] { bottom: 0; -webkit-overflow-scrolling: touch; }

（从这里）