90行代码，15个元素实现无限滚动，2024前端最新大厂面试真题

useEffect(() => {

intiateScrollObserver();

return () => {

resetObservation()

}

// eslint-disable-next-line react-hooks/exhaustive-deps

},[start, end])

const intiateScrollObserver = () => {

const options = {

root: null,

rootMargin: ‘0px’,

threshold: 0.1

};

const Observer = new IntersectionObserver(callback, options)

if (KaTeX parse error: Expected ‘}’, got ‘EOF’ at end of input: …server.observe(topElement.current);

}

if (KaTeX parse error: Expected ‘}’, got ‘EOF’ at end of input: …server.observe(bottomElement.current);

}

setObserver(Observer)

}

const callback = (entries, observer) => {

entries.forEach((entry, index) => {

const listLength = props.list.length;

// Scroll Down

if (entry.isIntersecting && entry.target.id === “bottom”) {

const maxStartIndex = listLength - 1 - THRESHOLD; // Maximum index value start can take

const maxEndIndex = listLength - 1; // Maximum index value end can take

const newEnd = (end + 10) <= maxEndIndex ? end + 10 : maxEndIndex;

const newStart = (end - 5) <= maxStartIndex ? end - 5 : maxStartIndex;

setStart(newStart)

setEnd(newEnd)

}

// Scroll up

if (entry.isIntersecting && entry.target.id === “top”) {

const newEnd = end === THRESHOLD ? THRESHOLD : (end - 10 > THRESHOLD ? end - 10 : THRESHOLD);

let newStart = start === 0 ? 0 : (start - 10 > 0 ? start - 10 : 0);

setStart(newStart)

setEnd(newEnd)

}

});

}

const resetObservation = () => {

observer && observer.unobserve(KaTeX parse error: Expected ‘EOF’, got ‘&’ at position 38: …; observer &̲& observer.unob…topElement.current);

}

const getReference = (index, isLastIndex) => {

if (index ===