【避坑指“难”】scrollTop滚动条兼容各浏览器

所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。

IE 8 及 更早 IE 版本不支持该属性,但可以使用 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 属性。

let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

let oldTop = 0;

useEffect(() => {
    
    
		if (haveScrollEvent !== false)
			window.addEventListener("scroll", scroll);
	}, [])
	
	useEffect(() => {
    
    
		return () => {
    
    
			if (haveScrollEvent !== false)
				window.removeEventListener("scroll", scroll);
		}
	}, [])

const scroll = e => {
    
    
		let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
		if (scrollTop >= 420 && oldTop < 420) {
    
    
			setBgColor('#202124');
		} else if (scrollTop < 420) {
    
    
			let state = {
    
    };
			if (oldTop >= 420)
				state = {
    
    
					bgColor: 'rgba(32,33,36,' + scrollTop / 420 + ')',
				};
			else
				state = {
    
    
					bgColor: 'rgba(32,33,36,' + scrollTop / 420 + ')',
				};
			setBgColor(state.bgColor);
		}
		oldTop = scrollTop;
	};