javascript - 仅当 html 内容高度大于视口(viewport)高度时，如何才能使元素在页面上可见？

Question

我有这个页面，它基本上是一个待办事项列表，您可以在其中添加无限数量的各种任务，当然，如果您添加很多任务，页面的高度会变大，并且 scollbar 将出现。我也把这个按钮固定在了页面的右下角，它唯一的作用就是让你回到页面的顶部。我想做的是仅在页面高度不大于视口(viewport)高度(因此无法滚动)的情况下将按钮的显示设置为无，因为在这种情况下它就没用了，然后设置它在页面变得高于 100vh 时显示以阻止。

Answer 1

一个简单的方法是检查 window.scrollY 位置值是否为 0。如果不是，您可以假设页面内容比视口(viewport)高并且页面是滚动的，因此您可以相应地显示/隐藏“返回顶部”按钮。例如:

Javascript

window.addEventListener('scroll', () => {
  const toTopLink = document.getElementById('toTopLink');

  if (window.scrollY > 0) {
    toTopLink.classList.remove('hidden');
  } else {
    toTopLink.classList.add('hidden');
  }
});

HTML

<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li>...</li>
</ul>

<a id="toTopLink" class="hidden" href="#">Scroll to Top</a>

CSS

#toTopLink {
  display: block;
  position: fixed;
  /* ... */
}

#toTopLink.hidden {
  display: none;
}

这是一个 fiddle ，展示了这个解决方案的实际效果(请注意，您需要相应地调整窗口高度以查看滚动行为):

https://jsfiddle.net/dwq4h82x/8/

---

按钮的平滑滚动和淡入/淡出

对于一些额外的好处，你可以做这样的事情而不是切换 display: none:

https://jsfiddle.net/6bjhvte4/3/