溫馨提示×

React里怎樣正確讀取scrollHeight

小樊
85
2024-10-10 01:33:39
欄目: 編程語言

在 React 中，要正確讀取元素的 scrollHeight，你需要使用 Ref 和 useEffect。scrollHeight 是一個只讀屬性，它表示元素的內(nèi)容高度（以像素為單位），包括溢出導(dǎo)致的滾動條。以下是一個簡單的示例：

  1. 首先，確保你已經(jīng)在項目中安裝了 React 和 ReactDOM。

  2. 創(chuàng)建一個名為 ScrollComponent.js 的文件，并在其中編寫以下代碼：

import React, { useRef, useEffect } from 'react';

const ScrollComponent = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      console.log('scrollHeight:', containerRef.current.scrollHeight);
    }
  }, []);

  return (
    <div
      ref={containerRef}
      style={{
        width: '300px',
        height: '200px',
        overflowY: 'scroll',
        border: '1px solid black',
      }}
    >
      <div style={{ height: '500px' }}>
        This is some content that will cause the container to scroll.
      </div>
    </div>
  );
};

export default ScrollComponent;

在這個示例中，我們創(chuàng)建了一個名為 ScrollComponent 的函數(shù)組件。我們使用 useRef 創(chuàng)建了一個名為 containerRef 的 Ref，并將其附加到包含滾動內(nèi)容的 div 上。然后，我們使用 useEffect 在組件掛載時讀取 scrollHeight。當組件掛載時，useEffect 內(nèi)的回調(diào)函數(shù)將被執(zhí)行，輸出 scrollHeight。

  1. 最后，在你的主要應(yīng)用文件（例如 App.js）中，導(dǎo)入并使用 ScrollComponent：
import React from 'react';
import ScrollComponent from './ScrollComponent';

const App = () => {
  return (
    <div>
      <h1>Scroll Component Example</h1>
      <ScrollComponent />
    </div>
  );
};

export default App;

現(xiàn)在，當你運行你的應(yīng)用程序時，你應(yīng)該能在控制臺中看到 scrollHeight 的值。

0 踩