TypeError：无法将属性“onscroll”设置为 null答案

【问题标题】：TypeError: Cannot set property 'onscroll' of nullTypeError：无法将属性“onscroll”设置为 null
【发布时间】：2021-08-28 16:52:20
【问题描述】：

我正在尝试创建滚动效果，左侧图像根据滚动位置发生变化，右侧在滚动时更改内容。

尝试执行onscroll javascript 函数时出现错误。我不确定我做错了什么——我试图在 React App 中使用它——React 是否有可能有不同的规则来调用这个函数？

我在这里创建了示例：

https://codesandbox.io/s/scroll-effect-37ecc

【问题讨论】：

好吧。您的 scrollingDiv 为空，因为 getElementById("scrollContainer") 不返回任何内容。由于您的组件未安装，因此您不会在 DOM 上拥有 div。尝试将您的代码放入useEffect
这实际上解决了它@Panther，我把整个JS代码放在useEffect hook中。
如果 getElementById 则使用“getElementByClassName”，并为该元素提供唯一的类。另外，在 useEffect 中添加您的调用。并使用 onScroll 而不是 onscroll

标签： javascript reactjs function onscroll

【解决方案1】：

通常，你会使用 react 中的 useRef() 函数来直接访问 DOM 元素，然后你可以像这样使用它们：

const scrollingDiv = useRef(null);
<div id="scrollingSomething" ref={scrollingDiv}>

然后您可以使用 scollingDiv 对元素的引用来操作该元素

https://codesandbox.io/s/scroll-effect-forked-3nkbb

【讨论】：

【解决方案2】：

我会使用useRef 在 React 中进行 dom 操作。这将被优化。

import { useLayoutEffect, useState, useRef, useEffect } from "react";
import { render } from "react-dom";
import classnames from "classnames";
import "./index.css";

const App = () => {
  // const scrollingDiv = document.getElementById("scrollContainer");
  // const img1 = document.getElementById("img1");
  // const img2 = document.getElementById("img2");

  const scrollingDiv = useRef(null);
  const image1 = useRef(null);
  const image2 = useRef(null);

  useEffect(() => {
    scrollingDiv.current.onscroll = function () {
    if (scrollingDiv.scrollTop < 250) {
      image1.current.src = "https://placeimg.com/250/100/arch";
      image2.current.src = "https://placeimg.com/250/100/animals";
    }

    if (scrollingDiv.current.scrollTop > 500) {
      image1.current.src = "https://placeimg.com/250/100/nature";
      image2.current.src = "https://placeimg.com/250/100/people";
    }
    if (scrollingDiv.current.scrollTop > 1000) {
      image1.current.src = "https://placeimg.com/250/100/tech";
      image2.current.src = "https://placeimg.com/250/100/any";
    }
  };

  }, []);


  return (
    <>
      <div class="container">
        <div class="left">
          <img ref={image1} id="img1" src="https://placeimg.com/250/100/arch" />
          <img ref={image2} id="img2" src="https://placeimg.com/250/100/animals" />
        </div>
        <div class="middle" ref={scrollingDiv} id="scrollContainer">
          <div class="in-middle">
            <div class="in-in-middle" id="1"></div>
            <div class="in-in-middle" id="2"></div>
            <div class="in-in-middle" id="3"></div>
          </div>
        </div>
      </div>
    </>
  );
};

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

或者您也可以使用onSroll prop 将直接侦听器放在元素上。

另外，不要忘记在 useEffect 清理功能中清除所有侦听器，这样就不会出现任何内存泄漏问题。

【讨论】：