当 id 到达浏览器视口的顶部时，在 JavaScript 中执行操作

Question

我正在创建一个按钮，使用scrollIntoView()Javascript 中的函数将客户发送到 Woocommerce 中的评论字段。

当评论部分进入视口时，我还在努力隐藏和显示按钮，并且它正在工作，但我想更进一步。浏览器底部点击 ID 时的按钮，这是我不想要的。我希望按钮在 ID 到达浏览器顶部时显示。

这是基本的 HTML：

<button onClick="scrollToComment()" id="scroll-btn">Leave a Review</button>

<div id="reviews">

  //a bunch of reviews and comments go here

  <div id="review_form"></div>

</div>

这是JS：

window.addEventListener('scroll', function() {

    var element = document.querySelector('#reviews');

    var position = element.getBoundingClientRect();

    var scrollBtn = document.querySelector('#scroll-btn');

     if(position.top < window.innerHeight && position.bottom >= 0) {

        scrollBtn.style.display = 'block';

    }

    else {

        scrollBtn.style.display = 'none';

    }

});

function scrollToComment() {

    var button = document.querySelector('#review_form');

    button.scrollIntoView();

}

任何帮助，将不胜感激！

Answer 1

为什么不直接测试框架在顶部时的位置？// if position.top is between -1 and 1 it means it's on top// don't use '=== 0' to avoid pixel perfect glitchesif (position.top > -1 && position.top < 1) {&nbsp; scrollBtn.style.display = 'block';}

Answer 2

使用IntersectionObserver。var&nbsp;observer&nbsp;=&nbsp;new&nbsp;IntersectionObserver(callback,&nbsp;options);