三、css属性引发的scroll滚动不触发回调问题

发表于 | 分类于



HomePage.css

1
2
3
4
5
html, body{
    background-color: #eee;
    overflow:hidden;
    overflow-y:auto;
}

HomePage.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default class HomePage extends Component {
	
	componentDidMount() {
        window.addEventListener('scroll', (e)=>console.log('-abc'));
    }
	render(){
		return(
			<ul>
				<li><h1>aaa</h1></li>
				<li><h1>bbb</h1></li>
				<li><h1>ccc</h1></li>
				<li><h1>ddd</h1></li>	
				<li><h1>eee</h1></li>
				<li><h1>fff</h1></li>
			</ul>
		)
	}
}

滚动页面，发现并没有打印 abc。网上找了很久。原来是css属性引起的。只要将
overflow:hidden;
overflow-y:auto;
这两句删除，就可以正常回调了。