Question

我正在使用React并尝试在哈希更改后滚动一点锚链接应该链接到的地方。

The answer provided here应该有效，但出于某种原因，它不是。谁能看到我可能出错的地方？ scrollToId函数会被调用，但由于某种原因不会滚动到我想要的位置。

const Page = () => {

    let scrollToId = () => {

        if(location.hash.length !== 0) {

            window.scrollTo(window.scrollX, window.scrollY + 200);

        }

    }

    window.addEventListener("hashchange", scrollToId);

   return (
      <div>
          <a href="#one">Link</a>
          <p id="one">One</p>
      </div>
      );

}

Answer 1

这不是处理这个问题的正确方法。您需要在组件上使用事件处理程序才能使其正常工作。否则，您会在每个addEventListener方法上多次初始化相同的render事件。

import React, { Component } from 'react'

export default class YourComponent extends Component {
  constructor(props) {
    super(props)

    this.handleScroll = this.handleScroll.bind(this)
  }

  componentDidMount() {
    window.addEventListener('hashchange', this.handleScroll) // Initialize your listener
  }

  componentWillUnmount() {
    window.removeEventListener('hashchange', this.handleScroll) // Remove your listener
  }

  handleScroll() {
    if (window.location.hash.length !== 0) {
      window.scrollTo(window.scrollX, window.scrollY + 200)
    }
  }

  render() {
    return (
      <div>
        <a href="#one">Link</a>
        <p id="one">One</p>

        <div style={{ height: 900 }} />

        <div style={{ backgroundColor: 'red', width: 600, height: 100 }}>
          Content
        </div>
      </div>
    )
  }
}

通过id滚动到元素不工作

1 个答案: