javascript - 当 id 到达浏览器视口(viewport)顶部时在 JavaScript 中执行操作

Question

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

我还在努力在评论部分进入视口(viewport)时隐藏和显示按钮，并且它正在工作，但我想更进一步。一旦浏览器底部点击 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 glitches
if (position.top > -1 && position.top < 1) {
  scrollBtn.style.display = 'block';
}