使用滚动 position 切换按钮的可见性，使用香草 JavaScript（无 JQuery）。 注重表现

Question

我有一个按钮可以从页面底部向上滚动：

<div id="scroll-to-top">
   <a href="#head">
      <i></i>
   </a>
</div>

必不可少的 CSS：

#scroll-to-top {
  position: fixed;
  right: 0;
  bottom: 5%;
  width: 60px;
  display: none;
}

#scroll-to-top.visible {
  display: block;
}

我正在寻找一种最佳实践方法来切换#scroll-to-top 按钮的可见性。 这应该可以在没有任何 JS 库/框架的情况下工作，只需普通 JavaScript，并具有最佳性能。

谢谢。

Answer 1

简单易行

<script>
  const showButton = () => document.querySelector("#scroll-to-top").classList.add("visible");
  const hideButton = () => document.querySelector("#scroll-to-top").classList.remove("visible");
  document.addEventListener("scroll", (e) => window.scrollY < 100 ? hideButton() : showButton());
</script>

Answer 2

var lastScrollPos = 0;
var performing = false;

/**
 * show the button #scroll-to-top only
 * on bottom part of the page 
 */
function toggleVisibility(scrollPos, buttonId) {
  if(scrollPos > 500) {
    $(buttonId).addClass('visible');
  }
  else {
    $(buttonId).removeClass('visible');
  }
}


document.addEventListener('scroll', (evt) => {
  
  // just to test how often onScroll fires without throttling
  // it's no more often than every 16ms
  // so setTimeout(myFunction, 16) is senseless
  console.log(performance.now())

  lastScrollPos = window.scrollY;
  if(!performing) {
    setTimeout(function () {
      toggleVisibility(lastScrollPos, '#scroll-to-top');
      performing = false;
    }, 500);
  }
  performing = true;
}, {passive: true}) ;

笔记：

使用 setTimeout(myFunction, 500) 我们调用 toggleVisibility() max。 每 500 毫秒。 用大约 16 毫秒的超时来节流似乎是没有意义的，因为 onScroll 事件的触发频率不超过每 16 毫秒。

passive: true ：即使事件侦听器执行时间过长或根本不执行，也永远不会阻止滚动（首先滚动，然后是事件侦听器）