JS实现利用闭包判断Dom元素和滚动条的方向示例

下面是“JS实现利用闭包判断Dom元素和滚动条的方向示例”的完整攻略。

什么是闭包？

在JavaScript中，当函数可以访问并操作其作用域之外的变量时，就产生了闭包。

在函数内部定义一个内部函数，在内部函数中访问了外部函数的变量时，就形成了一个闭包。这个内部函数可以访问到外部函数中定义的变量，即使外部函数已经执行结束，这些变量仍然继续存在。

闭包有助于隐藏变量并保护它们不被全局污染，也可以用来在函数中创建私有变量。

判断Dom元素是否在视口范围内

示例1

对于网页中的图像或其他元素，我们可能需要判断它们是否显示在浏览器视口中。下面是一个例子，它使用JavaScript和一个闭包来判断一个DOM元素是否在视口中：

function isInViewport(elem) {
  var bounding = elem.getBoundingClientRect();
  return (
    bounding.top >= 0 &&
    bounding.left >= 0 &&
    bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

var box = document.querySelector('.box');

function onVisibilityChange() {
  if (isInViewport(box)) {
    console.log('Box is visible');
  } else {
    console.log('Box is not visible');
  }
}

window.addEventListener('DOMContentLoaded', onVisibilityChange);
window.addEventListener('scroll', onVisibilityChange);

该函数返回布尔值，表示DOM元素是否在视口中。然后，我们添加两个事件监听器，一个是当页面加载完成时，另一个是当页面滚动时。这样，我们每次滚动页面时，都会检查BOX是否在视口中。

示例2

下面是另一个方法，它使用闭包来跟踪一个DOM元素何时进入或离开视口：

function trackElementVisibility(elem, callback) {
  var isVisible = false;
  return function() {
    if (isInViewport(elem)) {
      if (!isVisible) {
        isVisible = true;
        callback(true);
      }
    } else if (isVisible) {
      isVisible = false;
      callback(false);
    }
  };
}

var box = document.querySelector('.box');

function visibilityCallback(isVisible) {
  if (isVisible) {
    console.log('Box entered the viewport');
  } else {
    console.log('Box left the viewport');
  }
}

var trackVisibility = trackElementVisibility(box, visibilityCallback);

window.addEventListener('DOMContentLoaded', trackVisibility);
window.addEventListener('scroll', trackVisibility);

该方法返回一个闭包，它跟踪某个DOM元素是否在视口中。然后，我们定义一个回调函数，在DOM元素进入或离开视口时调用该函数。

最后，我们使用两个事件侦听器来监视DOM元素的可见性。

判断页面滚动条的方向

我们还可以使用闭包来跟踪页面滚动条的方向，下面是一个示例：

function trackScrollDirection() {
  var lastScrollTop = 0;
  return function() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var scrollDirection;
    if (scrollTop > lastScrollTop) {
      scrollDirection = 'down';
    } else {
      scrollDirection = 'up';
    }
    lastScrollTop = scrollTop;
    console.log(scrollDirection);
  };
}

var trackScroll = trackScrollDirection();

window.addEventListener('scroll', trackScroll);

该函数返回另一个闭包，它跟踪页面滚动条的方向，并在滚动时打印滚动方向。

然后，我们将该闭包传递给滚动事件的侦听器，以便在滚动时调用该闭包。

总结

使用闭包可以有效地跟踪和控制页面元素的状态和行为，这对于Web开发人员来说是非常有用的。上面给出了两个示例，分别演示如何使用闭包来跟踪DOM元素的可见性和页面滚动方向。