jquery - 是否可以在移动设备上显示页面之前在页面上设置滚动顶部?

标签 jquery jquery-mobile mobile

我没有这方面的代码,因为这更多的是一个概念问题。

我有一个 jquery 移动页面,其内容顶部有一个部分,我想将其放置在视口(viewport)上方。我所做的是设置一个相当于此部分高度的silentscroll,这使得窗口滚动到我想要隐藏的部分的正下方。

我现在遇到的问题是,在页面加载和显示之间,到引发silentscroll时,有一瞬间能够看到要隐藏的部分,这使得页面看起来有问题,因为您可以看到静音滚动跳跃 100 和像素以隐藏该部分。这显然是因为silentscroll是在页面显示后执行的。

有没有办法将scrollTop设置为jquery mobile,以便在显示页面之前执行它,最好是在引发pagebeforeshow事件时执行?据我所知,这个事件是在所有jquery mobile widget都初始化之后抛出的,那么这个时候是不是不能在window上设置scrollTop呢?

我想做的是在页面显示之前设置窗口上的scrollTop值,这样用户就不必看到页面跳转。

我自己无法正确设置它,我想知道这是否可能。

这是我尝试重新创建的设置的快速图像。绿色方 block 是我想要“隐藏”的部分,位于 window 上方。蓝色框代表移动窗口,灰色框代表文档。

enter image description here

编辑:我检查过移动浏览器; Safari 在修正静音滚动时没有跳跃/抖动。 iOS 上的 Chrome 移动版确实存在跳跃/抖动问题,我想知道这是浏览器性能的问题,还是它对 DOM/viewport 更改进行排队的方式的问题...

最佳答案

演示:http://jsfiddle.net/gnsj6/

CSS:

.top {
    height: 200px;
    margin-top: -200px;
}

.container { 
    height: 1000px; 
}

jQuery:

$('html, body').animate({
    scrollTop: $("#topedge").offset().top + 200
}, 0, function() {

    $(".top").css("margin-top","0px");

});

我没有注意到这个解决方案有任何跳跃。两者都没有相当大的数据( http://jsfiddle.net/gnsj6/4/ )

关于jquery - 是否可以在移动设备上显示页面之前在页面上设置滚动顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18638901/

相关文章:

javascript - 突出显示 Li 中 , 之后的搜索文本

php - 刷新 WooCommerce Checkout 中某些运输字段更改的打印值

javascript - 用 jquery 附加 html 但没有获得样式

javascript - 在移动设备上触发 website-eastereggs

javascript - 通过 Ajax 调用获取格式化 html 内容的问题

javascript - 将 js 包含在 JQuery 验证中

jquery-mobile - 使用 jQuery Mobile 控制硬件后退按钮

css - 当从另一台服务器提取数据时如何使网站移动响应

javascript - 在触摸开始时向主体添加类而不是 .scroll()

html - 滑入式菜单 : witdth and position:fixed