反应：在水平滚动后添加 className="active" 到列表项（css：溢出-x：滚动；）答案

【问题标题】：React: add className="active" to list item after horizontal scroll (css: overflow-x: scroll;)反应：在水平滚动后添加 className="active" 到列表项（css：溢出-x：滚动；）
【发布时间】：2020-06-16 08:18:43
【问题描述】：

我希望根据我在 React 中的 Slider 上的水平滚动行为来更新我的列表项上的 className。关于如何解决这个问题的任何建议？到目前为止我找不到解决方案。

目前，一个图像会填满窗口的整个宽度，并且在滚动时下一个项目变得可见。但我也想让这个开关在 ul 列表项中可见。基本上，滚动后，我希望列表项 1 中的 className 变为“非活动”，第二个列表项 className 变为“活动”，依此类推。

主要组件基本上是这样的：

import React, { Component } from 'react';
import Slider from './Slider';

export default class Property extends Component {

  constructor(props) {
    super(props);
    this.state = {
      object: [
        {
          title: "...",
          description: "...",
          img: "...",
        },
        {
          ...}
      ]
    };
  }

  render() {
    return (
      <div id="property">
        <div className="detailsWrapper">
          <h2>Lodge Highlights</h2>
          <Slider object={this.state.object}/>
          <ul>
            <li className="is-active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    )
  }
}

我的 Slider 组件如下所示：

import React, { Component } from 'react';

export default class Slider extends Component {

  render() {
    return (
      <div className="higlights_slider">
        {this.props.object.map((eachObject, index) => {
          return (
            <div className="highlights_slider_content" key={eachObject.id} value={eachObject.id}>
              <img src={eachObject.img} alt=""/>
              <h3>{eachObject.title}</h3>
              <h4>{eachObject.description}</h4>   
            </div>
            )
           })}
        </div>
    )
  }
}

在我的 css（或 scss）中，我使用 .highlights_slider overflow-x: scroll

任何帮助表示赞赏！提前致谢！！

【问题讨论】：

标签： javascript reactjs frontend overscroll

【解决方案1】：

有很多方法可以做到这一点，但我建议为每张幻灯片使用交叉点观察员 https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API（最佳方式）。

如果您在实现观察者方面需要帮助，请告诉我。

你只需要一堂课。每次滑块超过阈值时，观察者都会通知您，因此您可以从当前索引 - 1 处的幻灯片中删除类并在当前幻灯片上添加类。

【讨论】：

嘿！太感谢了！我也刚刚发现了这一点。我会尝试，如果它不起作用，我会非常乐意回复您。
实际上，我确实有一个问题 - 您是否必须为每个滑块内容添加单独的类名？所以例如className="highlights_slider_content_[index]" 因为你需要观察每个人？或者我可以只观察整个窗口（.highlights_slider）吗？ @mosmk

【解决方案2】：

你只需要一堂课。每次滑块超过阈值时，观察者都会通知您，因此您可以从当前索引 - 1 处的幻灯片中删除类并在当前幻灯片上添加类。

【讨论】：