滚动时在div项的可见区域中的第一项和最后一项添加不透明度

Question

我有一个Div，其中包含div项目列表。 当用户滚动时，我希望基于以下条件应用不透明度

向上滚动时，应将不透明度应用于容器中可见项的下方，并应去除上部项的不透明度

向下滚动时，应将不透明性应用于容器中顶部可见的项目，并应去除项目的底部不透明性

 class HelloWorld extends React.Component {

  constructor(props){
    super(props);
    this.state={
      items:[]
    }
  }

  componentDidMount (){
    this.setState({
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10", "Item 11", "Item 12"]
    })
  }


  render() {
    const { items } = this.state;
    return (
      <div>
        <div className="mainContainer">
          <div className="childContainer"> 
        {this.state.items.map((match, key) => (
                 <div> {match}</div>
                ))}
            </div>
      </div>
      </div>
    );
  }
}

$blue: #a3d5d3;

body {
  background-color: $blue;
}



.mainContainer {
        height: 80px;
        width: 320px;
        overflow-y: auto;
        margin: 0 auto;
        margin-top: 26px;
        position: relative;
    }


.childContainer {
  height: 100px;
  position: relative;
}


    .mainContainer::before {
        content: '';
        position: fixed;
        width: 300px;
        height: 25px;
        //background: linear-gradient(white, rgba(255, 255, 255, 0.001)); 
       background: linear-gradient(180deg, red 0%, rgba(255,255,255,0) 100%);
    }

    .mainContainer::after {
        content: '';
        position: fixed;
        width: 300px;
        height: 25px;
        // background: linear-gradient(rgba(255, 255, 255, 0.001), white);
        background: linear-gradient(180deg, red 0%, rgba(255,255,255,0) 100%);
    }

ReactDOM.render（，document.getElementById（'root'））;

我该如何通过CSS或在React中处理事件来实现这一目标？