滚动效果显示背景色的透明度变化

const element = document.querySelector('.rolling-page__tab__item--one');
const areaElement = document.querySelector('.rolling-page__area__item--one');

选择某一个元素的最后一个
document.querySelector('.demo:last-child')

1.滚动区域距离可视窗口的高度

const areaHeight = areaElement.getBoundingClientRect().top;

2.滚动区域自身的高度
offsetHeight = height + padding

const areaSelfHeight = areaElement.offsetHeight;

3.透明度变化的元素，关于透明度的计算阈值
areaHeight : 在此处是从0开始的，然后到负数的高度结束
areaSelfHeight + areaHeight : 就是剩下的滚动区域的高度，透明度可变化值的依据范围

const opacityVal = (areaSelfHeight + areaHeight)/100;

4.设置透明度的值
const opacityValTwo = 1 - opacityVal;

element.style.backgroundColor =  "rgba(56, 178, 166," + opacityVal + ")";
elementTwo.style.backgroundColor =  "rgba(56, 178, 166,"+opacityValTwo+")";

5.最重要的一点：就是添加监听事件
鼠标滚动的时候，启动该事件addEventListener

document.addEventListener('scroll', this.rollingEvent);

既然有添加，就有解除该监听事件removeEventListener

element.removeEventListener('scroll', this.rollingEvent);