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');
    }

}

此代码很可能会解决您的问题。

ReactJS-检测何时出现垂直滚动

2 个答案: