Question

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

当向下滚动并单击链接时，在新页面中滑动之前页面滚动到顶部时会出现可见的跳转。当在某些时候需要将滚动转换到顶部时，两页并排坐在一起。

我尝试过的一件事是：我可以从顶部偏移新页面，使其从页面滚动到的级别开始，并在动画完成时将偏移重置为0，但页面将保持向下滚动。如果我使用window.scrollTo或jQuery的scrollTop（），那么固定标题会引起明显的闪烁。

我还能做些什么来保持旧页面滚动但新页面未展开？

我已经在iPod touch第三代，iPhone 4和iPhone 4s中测试了这一点，令人惊讶的是，迄今为止给我带来最少闪烁的设备是iPod touch。

Answer 1

只需添加此CSS

即可

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

（来自here）

Answer 2

我之所以回答这个问题，是因为它是关于该主题的原始文章，并明确指出，使用window.scrollTo()，jQuery's scrollTop()或有争议的{{1} }（来自JQM库）（超时+滚动）。

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

简而言之，JQM通过尝试将$.mobile.silentScroll()与pages函数中的某个值配对来解决了这个关键点。我必须删除此函数才能构建自己的函数：

§.mobile.silentScroll()

由于我有两种页面，第一种页面需要记住滚动位置（列表页面），第二种页面（卡片页面）需要始终从顶部开始，因此我将存储此信息在自定义$(document).on("mobileinit", function () { // other settings... $.mobile.SerialTransition.prototype.scrollPage = $.noop; $.mobile.ConcurrentTransition.prototype.scrollPage = $.noop; });中。

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

data-attribute

正如问题中指出的那样，我还不得不从顶部偏移<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

此处使用的JQM 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); } };如下：

pageevents

最后，还有一点CSS：

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

附加说明

对于外部页面和非内部缓存的页面，将需要自定义页面历史记录，因为：

在我的示例中，滚动值存储在页面本身和
当前标准的JQM页面历史记录实现，仅此目的还不够

以下是示例：

为了检查结果，特意放慢了/* 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; }过渡：

Answer 3

只是把返回假; 在被调用的javascript函数的末尾。

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

你也可以使用preventDefault（）;或event.stopPropagation（）;功能

reffer： event.preventDefault() vs. return false

希望它有所帮助。

使用jQuery Mobile幻灯片转换保持滚动位置

3 个答案: