Answer the question
In order to leave comments, you need to log in
What is not supported by Internet Explorer?
There is a script:
const container = document.querySelector('.baloons-app__inner');
function smoothScrollLoop(root, speed = 5) {
if (!root || !root.firstElementChild) return;
function elementScrollHeight(el) {
const style = window.getComputedStyle(el);
return el.clientHeight + parseFloat(style.marginTop);
}
let firstChild = root.getElementsByClassName('baloons-app__item')[0];
let secondChild = root.getElementsByClassName('baloons-app__item')[1];
let firstChildHeight = elementScrollHeight(firstChild);
let secondChildHeight = elementScrollHeight(secondChild);
let oldTimestamp = performance.now();
let scrollTop;
function step(newTimestamp) {
const timePassed = newTimestamp - oldTimestamp;
scrollTop = timePassed / 1000 * speed;
root.style.transform = 'translateY(-' + scrollTop + 'px)';
if(container.classList.contains('baloons-app__story')) {
if (scrollTop > 0) {
firstChild.classList.add('animate');
if (scrollTop > secondChildHeight || scrollTop > firstChildHeight) {
secondChild.classList.add('animate');
}
}
}
if (scrollTop >= firstChildHeight+secondChildHeight) {
root.style.transform = 'translateY(-' + scrollTop - (firstChildHeight+secondChildHeight) + 'px)';
firstChild.classList.remove('animate');
secondChild.classList.remove('animate');
root.appendChild(firstChild);
root.appendChild(secondChild);
firstChild = root.getElementsByClassName('baloons-app__item')[0];
secondChild = root.getElementsByClassName('baloons-app__item')[1];
firstChildHeight = elementScrollHeight(firstChild);
secondChildHeight = elementScrollHeight(secondChild);
oldTimestamp = newTimestamp;
}
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
}
smoothScrollLoop(container, 25);
Answer the question
In order to leave comments, you need to log in
Default function parameters are not supported.
Since speed is unlikely to be == 0, you
can write instead
function smoothScrollLoop(root, speed) {
speed = speed || 5;
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question