Как создать и добавить клон в дом с помощью ссылки с настраиваемой обработкой реакции? - PullRequest
Новая
       0

Как создать и добавить клон в дом с помощью ссылки с настраиваемой обработкой реакции?

0 голосов
/ 29 мая 2020

Я пытаюсь сделать некоторые вкладки липкими, а position: sticky работает не во всех браузерах. Я знаю, что обходной путь - установить position: fixed при прокрутке. Однако изменение положения элемента на фиксированное означает, что он покидает поток страницы, поэтому элементы под ним «подпрыгивают» примерно на высоту элемента. Насколько мне известно, решение состоит в том, чтобы создать элемент clone / placeholder, который имеет ту же высоту, что и элемент, который нужно сделать липким, и добавить его в dom. Я не могу сделать это с помощью настраиваемого хука реакции. Вот что у меня есть на данный момент.

Tabs компонент, который должен быть закреплен: 

const Tabs = () => {
  const tabsRef = useRef(null);
  const { isSticky } = useSticky(tabsRef);
  return (
    <ul ref={tabsRef} isSticky={isSticky}>
      <li>Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
      <li>Tab 4</li>
    </ul>
  );
};

useSticky custom hook: 

useSticky = (ref) => {
  const [isSticky, setSticky] = useState(false);
  // create a clone using ref here

  useEffect(() => {
    const handleScroll = () => {
      const { bottom } = ref.current.getBoundingClientRect();
      if (window.pageYOffset > bottom) {
        // append clone to parent here

        setSticky(true);
      } else {
        // remove clone from parent here

        setSticky(false);
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [ref]);

  return { isSticky };
}

Итак, 3 шага, которые я не могу сделать:

  • создать клон с помощью ссылки
  • добавить клон в родительский
  • удалить клон из родительского
...