addEventListener ('scroll') для прокрутки <div /> с использованием useRef - React - PullRequest
Новая
       9

addEventListener ('scroll') для прокрутки <div /> с использованием useRef - React

1 голос
/ 26 марта 2019

Это один из первых случаев, когда я на самом деле правильно использую React Hooks в проекте, так что терпите меня, если меня там нет.

В нижеприведенном компоненте моей целью является отображение <HelperTooltip> при загрузке, и когда прокручиваемый div (не окно) прокручивается, я хочу скрыть его после прокрутки X количества пикселей.

Мой мыслительный процесс заключается в создании объекта useRef на элементе прокрутки <div/>, который затем я могу добавить прослушивание события с помощью функции обратного вызова, которая затем может переключать состояние, чтобы скрыть <HelperTooltip>

Я создал кодовую коробку ниже, чтобы попытаться продемонстрировать, что я пытаюсь сделать. Как вы можете видеть в демоверсии, node.addEventListener('click') работает нормально, однако, когда я пытаюсь вызвать node.addEventListener('scroll'), это не стрельба.

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

Ссылка CodeSandbox: https://codesandbox.io/s/zxj322ln24

import React, { useRef, useCallback, useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = props => {
  const [isLogoActive, toggleLogo] = useState(true);

  const scrollElementRef = useCallback(node => {
    node.addEventListener("click", event => {
      console.log("clicked", event);
    });

    /* 
      I want to add the scroll event listener 
      here and the set the state isLogoActive to 
      false like the event listener above but the 'scroll' event
      is firing --- see below on line 21
    */

    // node.addEventListener("scroll", event => {
    //   console.log("scrolled", event);
    //   toggle log
    // });
  });

  return (
    <div className="scrolling-container">
      <div ref={scrollElementRef} className="scrolling-element">
        <p>top</p>

        {isLogoActive && (
          <div className="element-to-hide-after-scroll">
            <img
              style={{ width: "100px", height: "100px" }}
              src="https://arcweb.co/wp-content/uploads/2016/10/react-logo-1000-transparent-768x768.png"
            />
          </div>
        )}

        <p>bottom</p>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));

Ответы [ 2 ]

2 голосов
/ 27 марта 2019

Более простой подход для этого конкретного случая использования может состоять в том, чтобы использовать опору onScroll и использовать свойство scrollTop из события target, чтобы выяснить, следует ли скрывать изображение.

Пример 

const { useState } = React;

const App = props => {
  const [isLogoActive, setLogoActive] = useState(true);

  const onScroll = e => {
    setLogoActive(e.target.scrollTop < 100);
  };

  return (
    <div onScroll={onScroll} style={{ height: 300, overflowY: "scroll" }}>
      <p style={{ marginBottom: 200 }}>top</p>
      <img
        style={{
          width: 100,
          height: 100,
          visibility: isLogoActive ? "visible" : "hidden"
        }}
        src="https://arcweb.co/wp-content/uploads/2016/10/react-logo-1000-transparent-768x768.png"
      />
      <p style={{ marginTop: 200 }}>bottom</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>
0 голосов
/ 26 марта 2019

В вашем примере, прокрутка вызывается не на scrolling-element, а на scrolling-container, так что именно туда вы хотите поместить свой ref: https://codesandbox.io/s/ko4vm93moo:)

Но как Throlleсказал, что вы также можете использовать реквизит OnScroll!

...