Я сделал веб-страницу в React Js и один раздел для множества изображений, что приводит к тому, что прокрутка запускает 1 кадр / с, что делает его очень плохим для пользователя.
Прокрутка хорошо работает как в сафари, так и в Chrome, поэтому я не могу понять, почему Firefox такой медленный? Кажется, что Firefox обычно плохо отображает много изображений одновременно. Я использовал этот код из этого решения Кросс-браузерный JavaScript (не jQuery ...) прокрутка до верхней анимации
1007 * CSS *
margin: 20px 10px 0 10px;
width: 30%;
min-width: 300px;
background: #FFFFFF;
border-radius: 4px;
-webkit-box-shadow: 0px 5px 15px 0px rgba(70, 71, 76, 0.07);
box-shadow: 0px 5px 15px 0px rgba(70, 71, 76, 0.07);
overflow: hidden;
Ниже вы можете увидеть, как HTML отображается.
Используемая функция прокрутки используется на многих других страницах и работает нормально. Если я удаляю узел сотрудника, функция прокрутки работает очень хорошо.
Кто-нибудь с намеком на то, что Firefox так запаздывает, а сафари и хром работают очень хорошо?
функция прокрутки
scrollTo(position) {
let scrollY = window.scrollY || document.documentElement.scrollTop,
scrollTargetY = position() || 0,
speed = 2000,
easing = 'easeInOutSine',
currentTime = 0
// min time .1, max time .8 seconds
let time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8))
// easing equations from https://github.com/danro/easing-js/blob/master/easing.js
let easingEquations = {
easeOutSine: function (pos) {
return Math.sin(pos * (Math.PI / 2));
},
easeInOutSine: function (pos) {
return (-0.5 * (Math.cos(Math.PI * pos) - 1));
},
}
// add animation loop
function tick() {
currentTime += 1 / 60;
let p = currentTime / time;
let t = easingEquations[easing](p);
if (p < 1) {
requestAnimationFrame(tick);
window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
} else {
window.scrollTo(0, scrollTargetY);
}
}
// call it once to get started
tick()
}