jQuery Mobile面板平滑滚动

时间:2013-07-05 10:48:32

标签: jquery-mobile animation scroll panel smooth-scrolling

这不是关于JQM面板独立于页面滚动的问题,尽管这是一个我遇到麻烦并且几乎克服的问题,这是关于使面板平滑滚动并忽略设备浏览器的边缘事件(或者其他正确的用语是,我将在下面解释。)

基本上,我正在尝试复制Google移动网站上的菜单,这自然不会像我们普通人那样使用JQM。我已经非常接近了,但滚动动画非常僵硬。我需要它是基于动量的,而不是固定在你的手指上。

此外,当您到达菜单的顶部或底部时,它被视为文档的极端值,因此浏览器会向上或向下移动整个文档以指示页面的边缘。相反,当面板打开时,页面永远不会移动,菜单应该在面板中采取此行为。

由于我已将面板高度设置为100%,因此当菜单打开时,这会强制iOS Safari上的地址栏关闭。这似乎正是谷歌上发生的事情,但如果有办法解决这个问题,我很乐意听到它。

最后,我模仿独立滚动的方式的一个缺点是在面板打开时将内容包装设置为固定。但是,这意味着当面板打开时,页面始终会滚动到顶部。任何替代方案将不胜感激。我想我可以将页面顶部设置为scrollTop或其他东西。

总结:

  • 面板菜单需要平滑滚动(动量而不是直接触摸)
  • 菜单上的弹性边缘而不是窗口
  • iOS Safari地址栏干扰身高
  • 打开面板时页面固定在顶部

如果我的任何描述没有意义,只需在手机上访问google.com并查看其菜单。

1 个答案:

答案 0 :(得分:1)

ScrollFix似乎解决了我的所有问题。