我正在尝试滚动到滚动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属性似乎很荣幸。目前尚不清楚这是否有任何意想不到的副作用,但“它适用于我的机器!”
这对我有用:
setTimeout( function() {
$(div).scrollTop(0)
}, 500 );
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>
使用以下代码:
$("body").animate( { scrollTop: 50, }, 800, function(){
$("body").clearQueue();
} );
这些解决方案对我不起作用。我知道有人提到移动侦测,但他们的方法对我不起作用。最后我突然意识到使用移动检测为每种情况提供两种不同的CSS样式。也许不理想,但肯定有效。上面提到的用js暂时改变样式对我来说不起作用。
我有一个带有独立滚动div的两列布局,每个都设置为溢出:滚动,并且必须将body设置为overflow:hidden。我需要在其中一个列上使用scrollTop,并且没有解决方案。
我使用了wp_is_mobile()(Wordpress函数),如果移动为true,则溢出:hidden从body中删除,divs with overflow:scroll将css删除。最后,scrollTop在移动设备上工作。
我有同样的问题,并通过使用jquery .offset()
来解决它。
$('#yourFineElement').offset({ top: X, left Y)});
一个对我有用的工作:首先,暂时将overflow属性设置为'hidden',然后设置scrollTop属性,然后将overflow属性设置回'scroll'(或auto)。当overflow属性设置回'scroll'时,scrollTop值似乎保持不变并且很荣幸。这是一个非常简单的解决方法,适用于我测试的所有浏览器(桌面和移动)。我没有详尽地测试它,我没有测试转换到位,所以可能有我没有遇到的副作用...你的里程可能会有所不同 - 但这是一件容易尝试的事情。
移动电话不了解$('html,body')
所以你可以为手机做以下事情
if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
window.scrollTo(0)
} else {
// default `$('html,body')` code for scrolling
}
要么
只需使用$('body')
而不是$('html, body')
。
我有几个解决方案供你试试。您必须自己测试它们,因为我之前没有在移动浏览器中尝试过它们,但它们在这里:
.css()
方法(或.animate()
取决于你最终的目标)来调整上边距(注意:你必须将溢出更改为隐藏并将文本包装在内部div中,这将是你的边缘元素正在调整)top
属性。如果您对此有任何帮助,或者对此有任何疑问,请与我们联系。祝好运! :)
请注意,虽然我没有在移动设备上测试它们之前它们是基于CSS标准,而不是jQuery函数,所以它们应该工作。
你试过这个吗?
$("html").scrollTop(0);
根据@Allan Nienhuis的回答,暂时将overflow
属性设置为'hidden',对于Android 4.0.3
不起作用(例如,Kindle Fire 2正在运行) - 当你将overflow
设置回scroll
时,元素滚动回到顶部。
备择方案:
使用iScroll需要一些设置,但是:你需要一个具有固定高度和样式div
的包装器overflow: hidden
,并且要滚动的元素应该没有overflow
样式。 This jsFiddle demo展示了它是如何完成的。
我可以在Galaxy Tab上滚动到页面顶部的唯一方法是在滚动时将页面body
隐藏100ms。使用jQuery:
$("body").hide();
window.scrollTo(0, 0);
setTimeout(function(){ $("body").show() }, 100);
而不是使用scroll,scrollTo或scrollTop方法(这给我带来移动方面的问题),我建议在你的顶级DOM元素上设置一个ID(比如#top),并且只使用:
document.getElementById("top").scrollIntoView();
这对我来说对所有设备和浏览器都是最好的。
尝试使用jQuery的.animate方法:
$('.div').animate({ scrollTo: x; });
其中x等于你想要滚动到顶部的div的位置。