当前位置: 首页 > 面试题库 >

jQuery Mobile防止在页面过渡之前滚动到顶部吗?

拓拔烨赫
2023-03-14
问题内容

当我单击列表项以转到另一页时,当前页面跳到屏幕顶部,然后过渡到下一页。

此问题在jQM 1.2中发生,并且在新发布的1.3版本中仍未得到解决。

是否有人知道如何防止滚动到顶部,并且在使用“后退”按钮时还记得滚动位置?

这种令人讨厌的行为是不可接受的,并且破坏了整个应用程序的体验。

我将其作为Web应用程序在iPhone 4S和iOS 6.1.2上使用。


问题答案:

在描述您需要了解的可用解决方案之前,这不是错误,也不是完美的解决方案。问题在于,要为过渡到另一个页面设置动画,视口必须位于页面的顶部,以便当前页面和在其中过渡的页面垂直排列。

如果您在一页上的一长串列表(例如1000像素)的中途,而要传输到的页面只有几百个像素,则当前页面将在屏幕上进行适当的动画处理,但是新页面将无法显示为它会在视口上方。

iScroll是一种JavaScript,可以在Web浏览器中的窗口中滚动内容,其行为与在iPhone和Android等移动设备上进行本机滚动非常相似。这意味着您可以使用类似本机的滚动条和物理原理在浏览器中滚动窗口。

这也是我们当前问题的解决方案。由于iScroll实现,无论列表视图滚动到多远,页面都将占据页面高度的100%。这也是为什么返回列表视图仍将停留在相同位置的原因。

当然,如果要实施此解决方案,则应选择iScrollview实施。您仍然可以实现iScroll,但这将花费更多时间。

2.静音滚动

官方文档:http :
//jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

此jQuery Mobile功能也是我们首先遇到此问题的原因。在触发页面转换之前,原始页面会静默滚动到顶部。

在我们的例子中,当选择listview时,必须记住它的位置在这里您将找到在页面转换期间存储的数据/参数的解决方案,只需搜索章节:
页面转换之间的数据/参数操作
),然后再更改页面。在这种情况下,当我们返回上一页时,可以使用pagebefpreshow事件在显示页面之前静默滚动到底部。

//scroll to Y 100px
$.mobile.silentScroll(100);

更多信息

如果您想了解有关此主题的更多信息,请阅读 本文 ,您还将找到一些可用的示例。



 类似资料:
  • 当我单击列表项以转到另一个页面时,当前页面会跳转到屏幕顶部,然后再转换到下一页。 这个问题发生在jQM 1.2中,在新发布的1.3版本中仍然没有修复。 是否有人知道如何防止滚动到顶部,并在使用后退按钮时记住滚动位置? 这种令人讨厌的行为是不可接受的,并破坏了整个应用程序体验。 我使用它作为一个网络应用程序,在iPhone4S,iOS6.1.2。

  • 我有一个按钮,当点击应该平滑地滚动到顶部。平稳过渡并不奏效。现场网站。-->http://acetronaut.com 这里还有一个代码页。不管用。https://codepen.io/anon/pen/lbpwrv HTML: CSS: jQuery:

  • 由于我不能再使用复选框技巧,我不得不使用

  • 问题内容: 每次在React.js中执行渲染时,UI都会滚动到页面顶部。 JSFiddle:http : //jsfiddle.net/bengrunfeld/dcfy5xrd/ 有什么漂亮或 反应性的 方式可以阻止这种情况吗? 例如,如果用户向下滚动页面,然后按下导致渲染的按钮,则UI将保持与以前相同的滚动位置。 更新:为什么UI滚动到某些渲染的顶部,而不滚动到其他渲染? 问题答案: @floy

  • 问题内容: 如何使用JavaScript滚动到页面顶部?即使滚动条立即跳到顶部也是可取的。我不是在寻找平滑的滚动。 问题答案: 如果您不需要更改以进行动画处理,则无需使用任何特殊的插件-我只需要使用本机JavaScript window.scrollTo方法- 传入0,0即可将页面立即滚动到左上角。 参量 x坐标是沿水平轴的像素。 y坐标是沿垂直轴的像素。

  • 问题内容: 使用Python和Selenium时,我在滚动到网页顶部时遇到问题。 当页面由于某种原因加载时,您将被带到页面底部(这是固定的)。但是,当我尝试滚动到顶部时,它不起作用。 我尝试了以下方法: 和 我也尝试过找到该元素,然后滚动到它: 向下滚动到元素时,上面的scrollIntoView()代码适用。但是,它无法向上滚动。 我已经尝试过运行Chrome驱动程序和PhantomJs。 有什