jQuery scrollTop() 在移动浏览器上滚动 DIV 时不起作用,替代方法? [英] jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives?

查看:33
本文介绍了jQuery scrollTop() 在移动浏览器上滚动 DIV 时不起作用,替代方法?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试滚动到滚动 DIV 中的特定位置.现在我正在使用带有 jQ​​uery scrollTop() 函数的像素偏移,该函数在桌面浏览器上运行良好,但它不适用于 android 移动浏览器,谷歌的 Chrome Android 浏览器除外(没有 iOS 设备来测试它是否有效).我找到的所有解决方案都是针对页面(窗口)滚动而不是在 DIV 中滚动的,有人对我可以用什么来完成相同的任务有什么建议吗?

I am trying to scroll to a specific location in a scrolling DIV. Right now I am using a pixel offset with the jQuery scrollTop() function which works great on desktop browsers but it does not work on android mobiles browsers with the exception of Google's Chrome Android browser (do not have an iOS device to test if that works). All the solutions I have found are for page (window) scrolling and not for scrolling in a DIV, anyone have any suggestions on what else I can use to accomplish the same task?

这是一个例子:
http://jsfiddle.net/aQpPc/
http://jsfiddle.net/aQpPc/embedded/result/

我在桌面浏览器中尝试过的其他东西:

document.getElementById('ID_of_element_in_a_DIV').scrollIntoView();
document.getElementById('ID_of_DIV').scrollTop = 200;

编辑 3/11/13:

这是一个已知的 android 浏览器问题:https://code.google.com/p/android/issues/detail?id=19625

This is a know android browser issue: https://code.google.com/p/android/issues/detail?id=19625

错误报告中的一位用户提出了一种解决方法:

One user in the bug report suggested a workaround:

因为这个问题似乎只在溢出属性为设置为滚动,可以先设置为'隐藏',设置scrollTop属性,然后将其重置回滚动"(或自动).滚动顶部当元素被重新渲染时,属性似乎受到尊重滚动条.目前还不清楚这是否有任何意想不到的副作用,但是它适用于我的机器!"

because the issue only seems to appear when the overflow property is set to scroll, you can first set it to 'hidden', set the scrollTop property, then reset it back to 'scroll' (or auto). The scrollTop property seems to be honored when the element is re-rendered with scrollbars. It's not clear if this has any unexpected side-effects, but "it works on my machine!"

推荐答案

这对我有用:

setTimeout( function() {
    $(div).scrollTop(0)
}, 500 );

这篇关于jQuery scrollTop() 在移动浏览器上滚动 DIV 时不起作用,替代方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆