Реагировать - Получить положение компонента относительно области просмотра на Scroll, предпочтительно в процентах - PullRequest
Новая
       12

Реагировать - Получить положение компонента относительно области просмотра на Scroll, предпочтительно в процентах

0 голосов
/ 07 января 2020

в надежде найти какие-то хорошие решения, так как я изо всех сил пытаюсь выяснить это, и не нашел никаких библиотек.

Что мне нужно точно, так это отслеживание позиции компонента (Y) при прокрутке, и только когда его в окне просмотра. Когда компонент входит в область просмотра внизу, мне нужно 0, а когда нижняя часть того же компонента достигает вершины области просмотра, мне нужно 100 (или наоборот). Также может быть несколько компонентов на одной странице.

Это то, что я имею в виду простой функциональный компонент. Любая помощь приветствуется! спасибо

Также CodeSandbox здесь: https://codesandbox.io/s/wispy-bird-yyq24?fontsize=14&hidenavigation=1&theme=dark

import React, { useState, useEffect, useRef } from "react"

const SepFramer = () => {
  const [scrollY, setScrollY] = useState(0);
    const sepRef = useRef();

  function logIt() {
    let offsetTop = sepRef.current.offsetTop - window.pageYOffset;
    console.log(offsetTop)
  }

  useEffect(() => {
    function watchScroll() {
      window.addEventListener("scroll", logIt);
    }
    watchScroll();
    // Remove listener (like componentWillUnmount)
    return () => {
      window.removeEventListener("scroll", logIt);
    };
  });  

  return (
    <div className="separator" ref={sepRef}>
        Content
    </div>
  )
}

export default SepFramer

1 Ответ

0 голосов
/ 08 января 2020

Когда компонент пересекает нижнюю часть области просмотра 

Math.round(((window.innerHeight-offsetTop) * 100) / sepRef.current.clientHeight)
...