当 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 glitches

if (position.top > -1 && position.top < 1) {

  scrollBtn.style.display = 'block';

}

Answer 2

使用IntersectionObserver。

var observer = new IntersectionObserver(callback, options);