ReactJS-檢測何時出現垂直滾動

Question

當垂直窗口的瀏覽器滾動出現時，我想采取一些措施。 如下圖所示：

https://www.dropbox.com/s/t8th7cp7rcr662a/scroll.jpg?dl=0

以下代碼無效。

class App extends Component {
      constructor(props) {
        super(props)      
        this.onScroll = this.onScroll.bind(this)
      }

      onScroll(){
        window.onscroll = function (Event) {
          alert('the scroll is visible!')
        }
      }

      componentDidMount() {      
        window.addEventListener('onscroll', this.onScroll)
      }

      componentWillUnmount() {         
        window.removeEventListener('onscroll', this.onScroll)
      }

      render() {
        return (
          <div>
            <canvas id="canvas"></canvas>
            <div className="wrapper-all">
              <Coluna1 />
              <Coluna2 />
              <FooterMobile />
            </div>

          </div>
        )
      }
    }


    export default App;

Answer 1

您可以偵聽resize事件，並將document.body.scrollHeight與document.body.clientHeight進行比較。

Answer 2

componentDidMount() {
    const screenHeight = window.innerHeight;
    const totalHeight = window.body.scrollHeight;

    if(screenHeight < totalHeight) {
        alert('Scroll detected');
    }

}

此代碼很可能會解決您的問題。