gpt4 book ai didi

javascript - 使用 React 检查元素是否在 View 中

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:40:42 26 4
gpt4 key购买 nike

<分区>

请不要标记为重复。它与其他问题类似,但有所不同,因为我问的是在哪里放置代码,而不是如何编写。

我有这段代码,想检测哪个部分在 View 中:

export default class Home extends React.Component {
render() {
return (
<React.Fragment>
<div className="col_first">
<Scrollspy id="menu_section"
items={['section_1', 'section_2', 'section_3', 'section_4', 'section_5']}
currentClassName="is-current" className="c_nav_menu" style={{marginTop: 100}}>
<li className="c_nav_menu_item"><a href="#section_1">1</a></li>
<li className="c_nav_menu_item"><a href="#section_2">2</a></li>
<li className="c_nav_menu_item"><a href="#section_3">3</a></li>
<li className="c_nav_menu_item"><a href="#section_4">4</a></li>
<li className="c_nav_menu_item"><a href="#section_5">5</a></li>
</Scrollspy>

<div>
<li className="lines_between_1"></li>
<li className="lines_between_2"></li>
<li className="lines_between_3"></li>
<li className="lines_between_4"></li>
</div>
</div>
<section className="row bg_double">
<div className="col-lg-1">
</div>
<div className="col-lg-11 s_anim">
<div className="full_screen" id="section_1">
<div className="row full_size">
<div className="col-lg-12 center_in_s1">
<h1 className="text_s1 gradient_text">ZdajTo</h1>
<p>korepetycje on-line</p>
</div>
</div>
<div className="icon_border_round">
<a href="#section_2"><img src={"/assets/images/ic_arrow_down_gradient.png"}/></a>
</div>
</div>

<div className="full_screen" id="section_2">
<div className="row full_size">
<div className="col-lg-6 center_in">
<h1> elo elo 320 </h1>
</div>
<div className="col-lg-6 center_in">
<h1>Przykładowy tekst</h1>
</div>
</div>
<div className="icon_border_round">
<a href="#section_3"><img src={"/assets/images/ic_arrow_down_gradient.png"}/></a>
</div>
</div>

<div className="full_screen" id="section_3">
<div className="row full_size">
<div className="col-lg-6 center_in">
<h1> elo elo 320 </h1>
</div>
<div className="col-lg-6 center_in">
<h1>Przykładowy tekst</h1>
</div>
</div>
<div className="icon_border_round">
<a href="#section_4"><img src={"/assets/images/ic_arrow_down_gradient.png"}/></a>
</div>
</div>

<div className="full_screen" id="section_4">
<div className="row full_size">
<div className="col-lg-6 center_in">
<h1> elo elo 320 </h1>
</div>
<div className="col-lg-6 center_in">
<h1>Przykładowy tekst</h1>
</div>
</div>

<div className="icon_border_round">
<a href="#section_5"><img src={"/assets/images/ic_arrow_down_gradient.png"}/></a>
</div>

</div>


<div className="full_screen" id="section_5">
<div className="row full_size">
<div className="col-lg-6 center_in">
<h1> elo elo 320 </h1>
</div>
<div className="col-lg-6 center_in">
<h1>Przykładowy tekst</h1>
</div>
</div>

<div className="icon_border_round">
<a href="#section_1"><img src={"/assets/images/ic_arrow_up_gradient.png"}/></a>
</div>
</div>
</div>
</section>
</React.Fragment>
)
}
};

我或多或少知道该怎么做。

我发现了这个问题:Check if element is visible on screen

它有一个很好的答案,指向这个 fiddle :http://jsfiddle.net/t2L274ty/1/

答案中的代码

window.onscroll = function() {
wrapper.style.backgroundColor = checkVisible(tester) ? '#4f4' : '#f44';
};

function checkVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

所以我的问题是我应该把这种代码放在哪里?在 componentDidMount() 或者 render() 中? React 的做事方式是什么?

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com