Question

我在理解"scroll"事件处理程序时遇到问题，需要实现一个具有以下属性的按钮：

仅存在，如果页面长于4* viewportHeight
如果当前位置大于2*viewportHeight并且用户至少向上滚动200 px.

50px

消失。

获取当前滚动位置并在需要时显示按钮对我来说不是问题。直到现在，我还可以将按钮附加到DOM上，如果当前位置超过2 * viewportHeight，则使其可见。在上下滚动时实现显示和消失不是问题，但是如何获取当前位置作为非动态值，从而可以计算出差异？

没有Jquery

非常感谢您的帮助

function backToTop() {
 var windowHeight = window.innerHeight;
 var scrollHeight = window.scrollY;
 var pageHeight = document.documentElement.scrollHeight;

 if (pageHeight >= windowHeight * 4) {
  createButton();
  var button = document.querySelector(".backToTop");

  if (scrollHeight > windowHeight * 2) {
    console.log("scrollHeight" + scrollHeight);
    button.classList.remove("backToTop--off");
    button.classList.add("backToTop--on");
  }
  if (scrollHeight <= windowHeight * 2) {
    button.classList.remove("backToTop--on");
    button.classList.add("backToTop--off");
   }
  }
}

事件处理程序在这里：

window.addEventListener('scroll', function(e) {
 backToTop();
});

请注意，我在这里没有使用向上滚动和向下滚动事件，但是我从这里得到它们： https://github.com/yomotsu/scroll-detector

Answer 1

要获取元素相对于视口的位置：

const rect = element.getBoundingClientRect();

这将为您提供相对于视口的左，上，右，下，x，y，宽度和高度的只读属性。

如果您需要相对于其他元素的这些值，则需要根据该元素的位置进行一些数学运算。

也许像这样：

const body = document.body.getBoundingClientRect();
const element = element.getBoundingClientRect();
const offset = element.top - body.top;

完全取决于您的情况。

如果向上滚动200像素，则显示按钮；向下滚动50像素时，则删除按钮

1 个答案: