Issue
I want to get id of the section element when it reaches the top. Something similar has been done with jquery already but I want same with Angular. I tried in similar way but not getting success.
/*let content = document.getElementsByClassName('scrollable');
this.listener = this.renderer2.listen('window', 'scroll', (e) => {
let elementPos = el.getBoundingClientRect().top + window.pageYOffset;
var el = Array.prototype.forEach.call(content, (el)=>{
// console.log(el.id, el.getBoundingClientRect().bottom, parseInt(el.clientHeight))
if(el.getBoundingClientRect().bottom >= parseInt(el.clientHeight)) {
console.log({el})
}
})
*/
section {background: #ccc; height: 100vh;};
section:nth-child(odd) {background: red}
<section class="scrollable" id="scroll1"> Scroll1 </section>
<section class="scrollable" id="scroll2"> Scroll2 </section>
<section class="scrollable" id="scroll3"> Scroll3 </section>
<section class="scrollable" id="scroll4"> Scroll4 </section>
<section class="scrollable" id="scroll5"> Scroll5 </section>
Solution
I made this stackblitz.
I stored offsetTop
of sections and added a listener for scroll on window and checked if it reached the threshold.
Answered By - Mahdi Zarei
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.