Блог

Я видел учебные пособия, которые демонстрируют, как это сделать, но все, что я видел, использует «окно» или примеры, когда элемент отображается в нижней части страницы. У меня есть модальный с фиксированной высотой, который прокручивается:

 
const ItemMarkup = forwardRef(({user}, ref) => <li ref={ref}>...</li>)

// This opens up in a modal: https://headlessui.dev/react/dialog
<div className="content">
  {/** Tailwind's fixed height 'h-96' */}
  <ul ref={scrollRef} className="h-96 overflow-scroll">
    {users.map((user, index) => 
      <ItemMarkup
        {/** I'm looking for the last item/element to come in this view (ul) */}
        ref={users.length === index   1 ? ref : null}
        key={user.id} 
        user={user} 
      />
    )}
  </ul>
</div>

 

Я посмотрел эту демонстрацию, но опять же, она предназначена для всей страницы/окна. Тогда я попробовал использовать эту функцию:

 // element would be the ref.current
// target would be scrollRef
// But this always return false
function isInViewport(element, target) {
  const rect = element.getBoundingClientRect();
  return (
      rect.top >= 0 amp;amp;
      rect.left >= 0 amp;amp;
      rect.bottom <= target.innerHeight amp;amp;
      rect.right <= target.innerWidth
  );
}

 

Вот как я попробовал эту попытку:

 const ref = useRef()
const scrollRef = useRef()

// From the demo link above
const onScreen = useOnScreen(ref)

// No idea if I need this
const [scrolling, setScrolling] = useState(false)

useEffect(() => {
  const onScroll = e => {
    setScrolling(true)
    console.log(isInViewport(ref.current, scrollRef))
  };
  scrollRef?.current.addEventListener("scroll", onScroll);
  //console.log(ref, onScreen)

  return () => scrollRef?.current.removeEventListener("scroll", onScroll);
}, [ref, onScreen, scrolling])

 

Все это кажется неправильным. Есть ли способ реагирования, который я мог бы определить, когда конкретный элемент появляется в модальном представлении или в любом прокручиваемом представлении, которое я указываю, а не в представлении документа? Я просто не могу найти никакой документации/учебных пособий по этому вопросу.

Я создаю бесконечный свиток. Когда в поле зрения появляются последние элементы модального, я затем запускаю функцию для получения дополнительных данных.

Я думаю, что у меня слишком сложные вещи:

 
useEffect(() => {
  const onScroll = e => {
    console.log(isInViewport(e.target))
  };
  scrollRef?.current.addEventListener("scroll", onScroll);

  return () => scrollRef?.current.removeEventListener("scroll", onScroll);
}, [])


function isInViewport(element) {
  return element.scrollHeight - element.scrollTop === element.clientHeight
}
 

Теперь, когда я прокручиваю страницу вниз, я вижу журнал консоли true .