Javascript 当用户在数组容器上滚动时更新颜色

我有一个容器，它呈现一组数组元素。数组元素具有与其关联的颜色。颜色在状态中是预定义的。初始加载时，前5个元素具有相同的颜色。滚动容器时，第一个元素上的颜色应为第六个元素上的颜色。超出可见部分的元素的颜色应添加到传入元素中。任何两个元素都不应具有相同的属性。当容器向上或向下滚动时也是如此

我正在附加代码笔：

https://codepen.io/ericjj94/pen/MWeVvQr?editors=0000

容器可以快速或慢速滚动。我试图计算firstVisible和lastVisible元素的索引，但无法继续

 export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      houses: [
        { color: "#E31E50", content: 1 },
        { color: "#E5781D", content: 2 },
        { color: "#E3E51D", content: 3 },
        { color: "#7EE51D", content: 4 },
        { color: "#1DAEE5", content: 5 },
        { color: "", content: 6 },
        { color: "", content: 7 },
        { color: "", content: 8 },
        { color: "", content: 9 },
        { color: "", content: 10 }
      ],
      pinColors: ["#E31E50", "#E5781D", "#E3E51D", "#7EE51D", "#1DAEE5"]
    };
    this.lastScrollTop = 1;
    this.lastDirection = 1;
    this.sidePanelHouses = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // any number
  }

  componentDidMount() {
    const el = document.getElementById("scroll-container");
    el.addEventListener("scroll", this.handleScroll);
  }

  handleScroll = () => {
    const element = document.getElementById("scroll-container");
    const currentScrollTop = element.scrollTop;
    const galleryElementHeight = 80;
    const firstVisible = Math.floor(currentScrollTop / galleryElementHeight);
    const direction = this.lastScrollTop < currentScrollTop ? 1 : -1;
    this.lastScrollTop = currentScrollTop;
    const lastVisible = firstVisible + 4;
    console.log("firstVisible", firstVisible);
    const directionChange =
      this.lastDirection && direction !== this.lastDirection;
    this.lastDirection = direction;
    console.log("directionChange", directionChange);
  };

  renderArray = () => {
    return this.state.houses.map((item, index) => (
      <div
        key={index}
        style={{
          color: "black",
          height: "80px",
          backgroundColor: item.color
        }}
      >
        <span>{item.content} content</span>
      </div>
    ));
  };
  render() {
    return (
      <div
        id="scroll-container"
        style={{
          height: "400px",
          overflow: "auto"
        }}
      >
        {this.renderArray()}
      </div>
    );
  }
}

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
房屋：[
{颜色：#E31E50“，内容：1}，
{颜色：#E5781D”，内容：2}，
{颜色：#E3E51D“，内容：3}，
{颜色：#7EE51D“，内容：4}，
{颜色：{1DAE5]，内容：5}，
{颜色：''，内容：6}，
{颜色：''，内容：7}，
{颜色：''，内容：8}，
{颜色：''，内容：9}，
{颜色：，内容：10}
],
pinColors:[“E31E50”、“E5781D”、“e31d”、“7EE51D”、“1DAEE5”]
};
this.lastScrollTop=1；
此.lastDirection=1；
this.sidePanelHouses=[1,2,3,4,5,6,7,8,9,10]；//任何数字
}
componentDidMount（）{
const el=document.getElementById（“滚动容器”）；
el.addEventListener（“卷轴”，此为handleScroll）；
}
handleScroll=（）=>{
常量元素=document.getElementById（“滚动容器”）；
const currentScrollTop=element.scrollTop；
常量厨房元素高度=80；
const firstVisible=数学楼层（当前ScrollTop/galleryElementHeight）；
const direction=this.lastScrollTop{
返回此.state.houses.map（（项目，索引）=>(
{item.content}content
));
};
render（）{
返回(
{this.renderArray（）}
);
}
}

---

需要根据currentScroll使用最新的颜色更改更新houses数组。

您无需将其变得如此复杂，因为可折叠div和元素具有固定的高度。看看这个代码沙盒：

import React，{useffect，useState}来自“React”；
从“lodash”导入{cloneDeep}；
导出默认函数App（）{
const[house，sethouse]=useState([
{颜色：#E31E50“，内容：1}，
{颜色：#E5781D”，内容：2}，
{颜色：#E3E51D“，内容：3}，
{颜色：#7EE51D“，内容：4}，
{颜色：{1DAE5]，内容：5}，
{颜色：''，内容：6}，
{颜色：''，内容：7}，
{颜色：''，内容：8}，
{颜色：''，内容：9}，
{颜色：，内容：10}
]);
常量pinColors=[“E31E50”、“E5781D”、“e31d”、“7EE51D”、“1DAEE5]；
useffect（（）=>{
const el=document.getElementById（“滚动容器”）；
el.addEventListener（“卷轴”，把手卷轴）；
return（）=>el.removeEventListener（“滚动”，handleScroll）；
}, []);
常量handleScroll=（e）=>{
常量scrollOffset=e.target.scrollTop；
如果（滚动偏移量>0）{
常量元素滚动=数学楼层（滚动偏移/80）；
const newHouses=cloneDeep（houses）.map（house，index）=>{
如果（索引）(
{house.content}content
));
};
返回(
{renderArray（）}
);
}

如果整个元素位于scrollview的内部/外部，则可以利用这些条件更改颜色：

if (index <= elementsScrolled) {
  house.color = "";
} else if (index - 5 <= elementsScrolled) {
  house.color = pinColors[index % 5];
}

if（索引
if (index <= elementsScrolled) {
  house.color = "";
} else if (index - 5 <= elementsScrolled) {
  house.color = pinColors[index % 5];
}