动画scrollTop在firefox中不起作用
动画scrollTop在firefox中不起作用
提问于 2011-11-16 17:13:33
此函数运行良好。它将主体滚动到所需容器的偏移量
function scrolear(destino){
var stop = $(destino).offset().top;
var delay = 1000;
$('body').animate({scrollTop: stop}, delay);
return false;
}但不是在Firefox中。为什么？
-编辑-
为了在可接受的答案中处理de double trigger，我建议在动画之前停止元素：
$('body,html').stop(true,true).animate({scrollTop: stop}, delay);回答 8
Stack Overflow用户
发布于 2014-02-06 01:04:25
特征检测，然后在单个支持的对象上进行动画将是很好的，但没有一行解决方案。同时，这里有一种方法可以使用promise在每次执行时执行一次回调。
$('html, body')
.animate({ scrollTop: 100 })
.promise()
.then(function(){
// callback code here
})
});更新:以下是如何使用特征检测的方法。在调用动画之前，需要对这段代码进行评估：
// Note that the DOM needs to be loaded first,
// or else document.body will be undefined
function getScrollTopElement() {
// if missing doctype (quirks mode) then will always use 'body'
if ( document.compatMode !== 'CSS1Compat' ) return 'body';
// if there's a doctype (and your page should)
// most browsers will support the scrollTop property on EITHER html OR body
// we'll have to do a quick test to detect which one...
var html = document.documentElement;
var body = document.body;
// get our starting position.
// pageYOffset works for all browsers except IE8 and below
var startingY = window.pageYOffset || body.scrollTop || html.scrollTop;
// scroll the window down by 1px (scrollTo works in all browsers)
var newY = startingY + 1;
window.scrollTo(0, newY);
// And check which property changed
// FF and IE use only html. Safari uses only body.
// Chrome has values for both, but says
// body.scrollTop is deprecated when in Strict mode.,
// so let's check for html first.
var element = ( html.scrollTop === newY ) ? 'html' : 'body';
// now reset back to the starting position
window.scrollTo(0, startingY);
return element;
}
// store the element selector name in a global var -
// we'll use this as the selector for our page scrolling animation.
scrollTopElement = getScrollTopElement();现在使用我们刚刚定义的var作为页面滚动动画的选择器，并使用常规语法：
$(scrollTopElement).animate({ scrollTop: 100 }, 500, function() {
// normal callback
});Stack Overflow用户
发布于 2014-03-03 03:53:09
我花了很长时间试图弄清楚为什么我的代码不能工作-
$('body,html').animate({scrollTop: 50}, 500);问题出在我的css中-
body { height: 100%};相反，我将其设置为auto (并为最初为什么将其设置为100%而烦恼)。帮我修好了。
Stack Overflow用户
发布于 2013-05-28 10:24:13
注意这一点。我也有同样的问题，Firefox和Explorer都没有
$('body').animate({scrollTop:pos_},1500,function(){do X});所以我就像大卫说的那样
$('body, html').animate({scrollTop:pos_},1500,function(){do X});很好，它工作了，但是新的问题，因为有两个元素，body和html，函数被执行了两次，这就是，do X运行了两次。
只尝试使用'html'，Firefox和Explorer可以工作，但现在Chrome不支持此功能。
所以Chrome需要body，Firefox和Explorer需要html。这是一个jQuery错误吗？我也不知道。
只需小心你的函数，因为它会运行两次。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8149155
复制相关文章
相似问题