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

Question

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

Answer 1

我还没有测试过，但我很确定这可以通过@media 查询来完成：

.topbutton {
    display: none;
}

@media screen and (min-height: 100vh) {
    .topbutton {
        display: block;
    }
}

Answer 2

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

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 显示此解决方案的实际操作（请注意，您需要相应地调整 window 高度以查看滚动行为）：

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

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

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

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

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

How can I make an element visible on a page only when the html content height is bigger than the viewport height?

html

javascript

css

height

viewport

Javascript

HTML

CSS

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