在 React 中滾動到一個元素

1. 使用 React 中的 Element.scrollIntoView() 方法滾動到一個元素
2. 滾動到帶有 React Refs 的元素（參考）

現代網際網路充滿了各種型別的文字。很多時候，你必須滾動才能找到你要找的東西。然而，滾動無休止的提要可能會令人沮喪並且是一種糟糕的使用者體驗實踐。一種解決方案是建立目錄。

React 框架提供了一種更好的方法來實現相同的結果。你可以自動或通過單擊按鈕來引用一個元素並滾動到它。檢測使用者正在尋找什麼並立即顯示它可以提高你的應用程式或網站的使用者友好性。

有多種方法可以實現此功能。根據你使用的元件型別（功能與類），你必須選擇合適的元件。

儘管如此，每個實現都由兩個部分組成：HTML 元素介面提供的 Element.scrollIntoView() 方法和 React refs（引用的縮寫），可以使用 useRef() 鉤子（用於功能元件）建立，或 createRef() 方法（用於類元件）。

使用 React 中的 Element.scrollIntoView() 方法滾動到一個元素

如前所述，此方法可確保滾動向上或向下移動以顯示呼叫它的任何元素。

element.scrollIntoView() 只能接受一個引數。它可以是一個 alignToTop 布林值或 options 物件。

alignToTop

傳遞 true 布林值將導致元素與可滾動父元素的頂部對齊。

傳遞 false 值將使元素與可滾動父元素的底部對齊。

Options

此參數列示為一個物件，但允許你自定義和更改方法的預設設定。

該物件可以具有三個可選屬性。如果它們不存在，設定將恢復為預設值。

1. behavior 屬性允許你自定義過渡。預設情況下，它設定為 auto。它可以設定為 smooth，這是一個更好看的動畫。
2. block 屬性允許你垂直定位元素。它可以取 start、center、end 或 nearest 的值。start 是預設設定。
3. inline 屬性允許你水平定位元素。它可以取 start、center、end 或 nearest 的值。nearest 是預設設定。

瀏覽器支援

所有主要瀏覽器都支援 element.scrollIntoView() 方法本身。然而，一些舊的瀏覽器會忽略傳遞給它的 options 引數。根據 caniuse.com，全球只有約 76% 的使用者擁有支援此引數的瀏覽器。該網站將其描述為一項實驗性功能。

滾動到帶有 React Refs 的元素（參考）

React 中的 Refs 有許多不同的應用。最常見的用途之一是引用 DOM 中的元素。通過引用元素，你還可以訪問元素的介面。這對於捕獲我們要滾動到的元素至關重要。

可以通過將元素的 ref 屬性設定為引用例項來引用元素。下面是程式碼示例：

const testDivRef = useRef(null);
<div className="testDiv" ref={testDivRef}></div>

在這裡，<div> 元素是我們想要滾動到檢視中的元素。你也可以在任何其他 HTML 元素上使用 react 引用。

<h1 ref={testDivRef}>Title</h1>

引用物件的 current 屬性儲存實際元素。如果我們將 testDivRef.current 記錄到控制檯，我們會得到以下結果：

下面是完整的解決方案。

在功能元件中：

function TestComponent() {
  const testRef = useRef(null);
  const scrollToElement = () => testRef.current.scrollIntoView();
  // Once the scrollToElement function is run, the scroll will show the element
  return (
    <>
      <div ref={testRef}>Element you want to view</div>
      <button onClick={scrollToElement}>Trigger the scroll</button>
    </>
  );
}

在類元件中：

class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.testRef = React.createRef();
  }
  scrollToElement = () => this.testRef.current.scrollIntoView();
  // Once the scrollToElement method is run, the scroll will show the element
  render() {
    return <div ref={this.testRef}>Element you want in view</div>;
  }
}

其他提示

current 屬性只有在元件安裝後才能訪問。

最好在 useEffect() 回撥或等價物（這是類元件的 componentDidMount() 生命週期方法）中引用該屬性。

useEffect(() => console.log(testRef.current), [])

你還可以在繼續之前有條件地檢查 ref.current 是否等於 true。

if(testRef.current){
testRef.current.scrollIntoView()
}

你可以設定要通過單擊按鈕來觸發的滾動。這樣，你可以確保在安裝按鈕和應該檢視的元件後執行滾動。

<button onClick={scrollToElement}>Trigger the scroll</button>

捆綁解決方案

名為 react-scroll-to-component 的 NPM 包專門用於將此功能作為捆綁解決方案提供。使用 npm 或 yarn 安裝很容易。

要了解有關此軟體包的更多資訊，請閱讀文件。