Question

我一直在尝试编写一个简单的代码，该代码可以在移动视图中触发滚动事件（响应）。

当窗口大于768px时，事件将正确触发。但是，在移动视图中，它不能很好地工作。反应有问题吗？

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MyComp extends Component {
  constructor(props) {
    super(props);

this.state = {};
this.handleScroll = this.handleScroll.bind(this);


}



componentWillMount() {
    // window.addEventListener('scroll', this.handleSroll);
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    document.getElementsByTagName('html')[0].addEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    this.setState({ top: 100 }, function() {
      console.log(this.state.top);
    });
  };

  render() {
    return (
      <div style={{ minHeight: '2700px' }} onScroll={this.handleScroll}>
        <span>{'test comp'}</span>
      </div>
    );
  }
}

MyComp.propTypes = {
  top: PropTypes.number
};

export default MyComp;

Answer 1

.App {
   height: 2000px; 
}

class App extends Component {

    constructor(props) {
        super(props);
        this.handleScroll = this.handleScroll.bind(this);
    }

    componentDidMount(){
        window.addEventListener("scroll", this.handleScroll);
    }

    handleScroll() {
        document.querySelector("body").style.backgroundColor = "pink";
    }

    render() {
        return (
            <div className="App">
                Scroll to turn page pink :)
            </div>
        );
    }
}

我在iOS Safari和chrome中测试了代码，并且事件按预期触发。它还可以在OSX Chrome和Safari浏览器中使用。所以我认为这与React没有关系。

在您的代码中，您尝试在两个位置监听scroll事件：window和div（最小高度2700像素）。您将不会滚动div中的任何内容，因为其高度会根据您的示例中的子项进行调整。因此，在此示例中，onScroll上的div不起作用。

之所以未在scroll上获得window事件，可能是因为在移动视图中您没有滚动窗口/正文，而是可能在某些div或其他容器中滚动了。并且滚动事件不会在元素上冒出气泡：https://developer.mozilla.org/en-US/docs/Web/Events/scroll

无法在移动视图reactjs中触发滚动事件

1 个答案: