前言

今天接到一个需求，要求随着页面向下滚动，上方的搜索组件背景颜色从透明逐渐转为白色。

具体的实现思路就是通过监听页面元素的滚动高度，让搜索组件的透明度随之变化。

但是实现后发现过渡效果有很明显的卡顿感，本文将介绍此问题的解决方法。

解决方法

搜索组件，这里主要就是控制背景颜色的透明度。

<div
	style={{
        background: `rgba(255,255,255,${opacity})`
  	}}
  > ... </div>

优化前的逻辑，渐变效果有很明显的卡顿。

// 顶部搜索透明度0-1
const [opacity, setOpacity] = useState(0)
// 监听滚动事件
useEffect(() => {
    document.addEventListener('scroll', () => {
      setOpacity(opacity => window.scrollY / 70)
    })
}, [])

优化后的逻辑，渐变效果非常顺滑。

// 顶部搜索透明度0-1
const [opacity, setOpacity] = useState(0)
// 页面滚动
const handleScroll = () => {
	setOpacity(window.scrollY / 70)
};
// 添加监听事件
useEffect(() => {
	document.addEventListener('scroll', () => handleScroll());
	return () => document.removeEventListener('scroll', handleScroll);
}, []);

排查后发现，每次加载这个页面时都会给 document 添加滚动事件。导致的结果就是随着页面加载次数的增多，效果也变得越来越卡。

解决方法就是给 useEffect 添加一个清除函数，这样每次重新加载页面时，会把之前的滚动事件清除掉，再重新进行事件的添加。

这样就能保证页面始终都只有一个滚动监听事件，问题也随之解决。