jQuery scrollTop()无法在移动浏览器上滚动DIV,替代方案?

问题描述 投票:30回答:13

我正在尝试滚动到滚动DIV中的特定位置。现在我使用jQuery scrollTop()函数的像素偏移量,它在桌面浏览器上运行良好,但除了谷歌的Chrome Android浏览器之外它在Android手机浏览器上不起作用(没有iOS设备来测试它是否有效)。我找到的所有解决方案都是用于页面(窗口)滚动而不是用于在DIV中滚动,任何人都有任何关于我可以用来完成相同任务的建议吗?

这是一个例子: 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

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

因为当溢出属性设置为滚动时,似乎只出现问题,您可以先将其设置为“隐藏”,设置scrollTop属性,然后将其重置为“滚动”(或自动)。使用滚动条重新呈现元素时,scrollTop属性似乎很荣幸。目前尚不清楚这是否有任何意想不到的副作用,但“它适用于我的机器!”

javascript jquery html scroll mobile-browser
13个回答
10
投票

这对我有用:

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

0
投票
jQuery(document).ready(function($) {

$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1500);
});
});

<a href="#top" class="scroll"></a>

0
投票

使用以下代码:

$("body").animate( { scrollTop: 50,  },  800,  function(){
    $("body").clearQueue();
} );

0
投票

这些解决方案对我不起作用。我知道有人提到移动侦测,但他们的方法对我不起作用。最后我突然意识到使用移动检测为每种情况提供两种不同的CSS样式。也许不理想,但肯定有效。上面提到的用js暂时改变样式对我来说不起作用。

我有一个带有独立滚动div的两列布局,每个都设置为溢出:滚动,并且必须将body设置为overflow:hidden。我需要在其中一个列上使用scrollTop,并且没有解决方案。

我使用了wp_is_mobile()(Wordpress函数),如果移动为true,则溢出:hidden从body中删除,divs with overflow:scroll将css删除。最后,scrollTop在移动设备上工作。


-2
投票

我有同样的问题,并通过使用jquery .offset()来解决它。

http://api.jquery.com/offset/

$('#yourFineElement').offset({ top: X, left Y)});

6
投票

一个对我有用的工作:首先,暂时将overflow属性设置为'hidden',然后设置scrollTop属性,然后将overflow属性设置回'scroll'(或auto)。当overflow属性设置回'scroll'时,scrollTop值似乎保持不变并且很荣幸。这是一个非常简单的解决方法,适用于我测试的所有浏览器(桌面和移动)。我没有详尽地测试它,我没有测试转换到位,所以可能有我没有遇到的副作用...你的里程可能会有所不同 - 但这是一件容易尝试的事情。


3
投票

我在这里找到答案http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/

移动电话不了解$('html,body')所以你可以为手机做以下事情

if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    window.scrollTo(0)
} else {
    // default `$('html,body')` code for scrolling
}

要么

只需使用$('body')而不是$('html, body')


1
投票

我有几个解决方案供你试试。您必须自己测试它们,因为我之前没有在移动浏览器中尝试过它们,但它们在这里:

  1. 使用jQuery的.css()方法(或.animate()取决于你最终的目标)来调整上边距(注意:你必须将溢出更改为隐藏并将文本包装在内部div中,这将是你的边缘元素正在调整)
  2. 执行与第一个解决方案相同的操作,除了将嵌入的div的位置设置为relative并调整它的top属性。

如果您对此有任何帮助,或者对此有任何疑问,请与我们联系。祝好运! :)

请注意,虽然我没有在移动设备上测试它们之前它们是基于CSS标准,而不是jQuery函数,所以它们应该工作。


1
投票

你试过这个吗?

$("html").scrollTop(0);

1
投票

根据@Allan Nienhuis的回答,暂时将overflow属性设置为'hidden',对于Android 4.0.3不起作用(例如,Kindle Fire 2正在运行) - 当你将overflow设置回scroll时,元素滚动回到顶部。

备择方案:

  • 通过一个辅助函数滚动你自己的滚动,如here所示 - 虽然这很容易实现,但它不会让你惯性滚动或过度滚动。
  • 使用像iScroll这样的库,它基于CSS转换实现自己的复杂滚动(惯性,过度滚动)。

使用iScroll需要一些设置,但是:你需要一个具有固定高度和样式div的包装器overflow: hidden,并且要滚动的元素应该没有overflow样式。 This jsFiddle demo展示了它是如何完成的。


1
投票

我可以在Galaxy Tab上滚动到页面顶部的唯一方法是在滚动时将页面body隐藏100ms。使用jQuery:

$("body").hide();
window.scrollTo(0, 0);
setTimeout(function(){ $("body").show() }, 100);

1
投票

而不是使用scroll,scrollTo或scrollTop方法(这给我带来移动方面的问题),我建议在你的顶级DOM元素上设置一个ID(比如#top),并且只使用:

document.getElementById("top").scrollIntoView();

这对我来说对所有设备和浏览器都是最好的。


0
投票

尝试使用jQuery的.animate方法:

$('.div').animate({ scrollTo: x; });

其中x等于你想要滚动到顶部的div的位置。

© www.soinside.com 2019 - 2024. All rights reserved.