Firefox размещает переполнение на html
уровне, если он не предназначен для поведения по-другому.
Чтобы заставить его работать в Firefox, используйте
$('body,html').animate( ... );
Рабочий пример
Решением CSS было бы установить следующие стили:
html { overflow: hidden; height: 100%; }
body { overflow: auto; height: 100%; }
Я предполагаю, что решение JS будет наименее инвазивным.
Обновить
Большая часть обсуждения ниже фокусируется на том факте, что анимация scrollTop
двух элементов вызовет обратный вызов дважды. Функции обнаружения браузеров были предложены и впоследствии устарели, а некоторые, возможно, довольно надуманы.
Если обратный вызов идемпотентен и не требует больших вычислительных мощностей, его повторный запуск может быть полной проблемой. Если множественные вызовы обратного вызова действительно являются проблемой, и если вы хотите избежать обнаружения функции, может быть более простым обеспечить принудительное выполнение обратного вызова только один раз из обратного вызова:
function runOnce(fn) {
var count = 0;
return function() {
if(++count == 1)
fn.apply(this, arguments);
};
};
$('body, html').animate({ scrollTop: stop }, delay, runOnce(function() {
console.log('scroll complete');
}));