[英]React: add className="active" to list item after horizontal scroll (css: overflow-x: scroll;)
I wish to update my className on my list items based on my horizontal scrolling behavior on a Slider in React.我希望根据我在 React 中的 Slider 上的水平滚动行为更新我的列表项上的 className。 Any suggestions on how I could solve this?
关于我如何解决这个问题的任何建议? I could not find a solution so far.
到目前为止我找不到解决方案。
Currently, one image fills up the whole width of the window and upon scrolling the next item becomes visible.目前,一个图像填满了窗口的整个宽度,滚动时下一个项目变得可见。 But I also want to make this switch visible in the ul list item.
但我也想让这个开关在 ul 列表项中可见。 Basically, after scrolling, I want that the className from the list item 1 becomes "inactive" and the second list items className becomes "active" and so on.
基本上,滚动后,我希望列表项 1 中的 className 变为“inactive”,第二个列表项 className 变为“active”,依此类推。
Basically the main component looks something like this:基本上主要组件看起来像这样:
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>
)
}
}
My Slider component looks like this:我的 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>
)
}
}
And in my css (or scss) I use for .highlights_slider overflow-x: scroll
在我的 css(或 scss)中,我用于 .highlights_slider
overflow-x: scroll
Any help is appreciated!任何帮助表示赞赏! Thanks in advance!!
提前致谢!!
There a lot of ways to do this but I would recommend intersection observer https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API for each slide (best way).有很多方法可以做到这一点,但我会为每张幻灯片推荐交叉观察者https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API (最佳方式)。
Let me know if you need help with implementing the observer.如果您在实施观察者方面需要帮助,请告诉我。
You only need one class.你只需要一门课。 The observer will inform you every time a slider passes the threshold, so you can remove the class from the slide at current index - 1 and add the class on the current slide.
每次滑块通过阈值时,观察者都会通知您,因此您可以从当前索引 - 1 的幻灯片中删除该类,并在当前幻灯片上添加该类。
you only need one class.你只需要一门课。 The observer will inform you every time a slider passes the threshold, so you can remove the class from the slide at current index - 1 and add the class on the current slide.
每次滑块通过阈值时,观察者都会通知您,因此您可以从当前索引 - 1 的幻灯片中删除该类,并在当前幻灯片上添加该类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.