响应：在水平滚动后将 className="active" 添加到列表项 (css: overflow-x: scroll;)

Question

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

目前，一张图片填满了 window 的整个宽度，滚动后可以看到下一个项目。但我也想让这个开关在 ul 列表项中可见。基本上，滚动后，我希望列表项 1 中的 className 变为 "inactive"，第二个列表项 className 变为 "active"，依此类推。

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

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>
    )
  }
}

我的滑块组件如下所示：

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

感谢任何帮助！提前致谢！！

Answer 1

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

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

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

Answer 2

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

响应：在水平滚动后将 className="active" 添加到列表项 (css: overflow-x: scroll;)

React: add className="active" to list item after horizontal scroll (css: overflow-x: scroll;)

javascript

frontend

overscroll

reactjs