How to Add Infinite Scroll to Your Webflow Website

[@AzharBhagas]

Thanks for the tutorial!

[@chrysangeloskougioutas7556]

Thats a sick effect. Thanks for sharing

[@deskiterdesign]

Super helpful. thanks!

[@EverrNp]

Très bonne vidéo! Nice job

[@yacobu3000]

Thanks for the video También! I got it to work . However it doesn't work on tablet and mobile. Any idea how to solve this?

[@2020-k8v]

Excellent

[@kai_t7031]

it doesnt work on mobile or tablet. why is that?

[@35mmdiaries6]

Thanks for the tutorial. I followed exactly but my page won't scroll at all upon publish. Any ideas?

[@alextourgis]

Do you have any error message in your console ? You can dm me on twitter if you want to tell me more about it so i can help you fix it twitter.com/mael_ruffini

[@fazlu3706]

I'm getting a snap a jump in my page while scrolling is something wrong with the code?

[@alextourgis]

Would you mind sharing a link to your site so i can take a look at it ?

[@lwazixaba]

page wont scroll monsieur, any solutions?

[@alextourgis]

Do you have any error message in your console ?

[@ellenhossain]

Hey, I followed all your instructions but it doesn't work for me. Also, I can't access your notion page

[@alextourgis]

Hello, i just updated the link sorry about that ! If you still can't make it work don't hesitate to give me more details so i can help you fix it !

[@ellenhossain]

@@alextourgis Hi, thank you so much! I'll definitely let you know if I have any trouble later on

[@ellenhossain]

@@alextourgis Hey, everything worked perfectly! Thanks a lot

[@lwazixaba]

My french is not good but Génial!

[@alextourgis]

Thanks a lot Lwazi :) Bienvenue !

[@XDROUGIII]

Hello,
J'ai essayé de mettre en place le premier effet mais je n'ai pas réussi. J'ai l'impression que le script JS n'est pas détecté sur ma page.
1 - Voici ma première erreur : Uncaught SyntaxError: Cannot use import statement outside a module (at script.js:1:1);
Pour résoudre ce problème j'ai rajouté type="module" dans le de mon body tag.
2 - Et du coup maintenant j'ai ces deux erreurs :
- Access to script at 'infinite-webflow.netlify.app/script.js' from origin 'doriane-portfolio-d3341b.webflow.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- GET infinite-webflow.netlify.app/script.js net::ERR_FAILED 200
Avez-vous une idée pourquoi j'ai ce problème ?
Merci d'avance !

[@XDROUGIII]

[UPDATE]
J'ai réussi à régler le problème.
J'ai copié l'ensemble du script js dans le body tag et enlever le import css :
let wrapper = document.querySelector(".infinite-content"),
items = document.querySelectorAll(".infinite-item"),
disableScroll = !1,
scrollHeight = 0,
scrollPos = 0,
clonesHeight = 0,
duplicate = [];
function getScrollPos() {
return wrapper.scrollTop
}
function setScrollPos(e) {
wrapper.scrollTop = e
}
function getClonesHeight() {
return clonesHeight = 0, duplicate.forEach(e => {
clonesHeight += e.offsetHeight
}), clonesHeight
}
function calc() {
scrollPos = getScrollPos(), scrollHeight = wrapper.scrollHeight, clonesHeight = getClonesHeight(), scrollPos = scrollHeight ? (setScrollPos(1), disableScroll = !0) : scrollPos {
disableScroll = !1
}, 40)
}
function init() {
items.forEach(e => {
const l = e.cloneNode(!0);
wrapper.appendChild(l), l.classList.add("duplicate")
}), duplicate = wrapper.querySelectorAll(".duplicate"), calc(), wrapper.addEventListener("scroll", () => {
window.requestAnimationFrame(scrollUpdate)
}, !1), window.addEventListener("resize", () => {
window.requestAnimationFrame(calc)
}, !1)
}
getClonesHeight(), init();
Je ne sais pas si c'est la bonne méthode mais ça marche niquel !
Merci pour le tuto et le script ! 💪