Нужно добавить следующий скрипт в реакт
var doc = window.document,
context = document.querySelector('.js-loop'),
clones = document.querySelectorAll('.is-clone'),
disableScroll = false,
scrollHeight = 0,
scrollPos = 0,
clonesHeight = 0,
i = 0;
function getScrollPos () {
return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);
}
function setScrollPos (pos) {
context.scrollTop = pos;
}
function getClonesHeight () {
clonesHeight = 0;
for (i = 0; i < clones.length; i += 1) {
clonesHeight = clonesHeight + clones[i].offsetHeight;
}
return clonesHeight;
}
function reCalc () {
scrollPos = getScrollPos();
scrollHeight = context.scrollHeight;
clonesHeight = getClonesHeight();
if (scrollPos <= 0) {
setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
}
}
function scrollUpdate () {
if (!disableScroll) {
scrollPos = getScrollPos();
if (clonesHeight + scrollPos >= scrollHeight) {
// Scroll to the top when you’ve reached the bottom
setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
disableScroll = true;
} else if (scrollPos <= 0) {
// Scroll to the bottom when you reach the top
setScrollPos(scrollHeight - clonesHeight);
disableScroll = true;
}
}
if (disableScroll) {
// Disable scroll-jumping for a short time to avoid flickering
window.setTimeout(function () {
disableScroll = false;
}, 40);
}
}
function init () {
reCalc();
context.addEventListener('scroll', function () {
window.requestAnimationFrame(scrollUpdate);
}, false);
window.addEventListener('resize', function () {
window.requestAnimationFrame(reCalc);
}, false);
}
if (document.readyState !== 'loading') {
init()
} else {
doc.addEventListener('DOMContentLoaded', init, false)
}
По итогу страница должна быть в скролиться по лупу.
import { useState, useRef } from 'react';
import { Navbar } from './components';
import './index.css'
import './app.css'
import Marquee3k from 'marquee3000';
const App = () => {
return (
<div className=" p-5 overflow-hidden">
<Navbar/>
<main class="Loop js-loop">
<div className="p-5 one " id="element"> Home Page </div>
<div className="p-5 two min-h-screen bg-neutral-300" > Home Page </div>
<div className="p-5 three min-h-screen bg-neutral-400 " > Home Page </div>
<div className="p-5 four min-h-screen bg-neutral-500 " > Home Page </div>
<div className="p-5 three min-h-screen bg-neutral-600 "> Home Page </div>
<div className="p-5 one is-clone " > Home Page </div>
<div className="p-5 two is-clone min-h-screen bg-neutral-300" > Home Page </div>
</main>
</div>
)
}
export default App;
