在滚动时检查元素是否在视口外的哪个事件?

时间:2016-05-04 10:02:27

标签: javascript jquery css

我正在尝试在滚动时检查元素是否在我的视口内。 如果它在我的视口之外,我会添加一个将元素固定到顶部的类。

我用来确定元素是否在视口之外的函数是:

isElementInViewport : function(el) {
    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

我添加了一个触发此功能的滚动事件:

$(window).on('scroll', function(event){
   testObject.isElementInViewport(event.target);
}

这里的问题是,在滚动时,我的联想瑜伽的CPU会变得疯狂。 我试过了:

  • polling,间隔为
  • 使用timeout functionvariable outside the event function scope切换特定时间间隔

这两种方法都有效,但我需要一种方法来最小化性能影响,因为我使用它的页面已经有JS的LOADS工作。 我还需要在它到达视口之外时将其固定到顶部,而不是几毫秒之后。

有没有针对此的低性能解决方案? 这可以仅在CSS中完成吗?

修改

我注意到我没有问我的问题。 下面的当前答案正在起作用,但当我向上和向下滚动时,会产生相同的巨大性能影响:

First answer Second answer

我需要防止脚本需要这么多CPU能力!

1 个答案:

答案 0 :(得分:0)

jQuery – test if element is in viewport (visible on screen)

复制

HTML

$.fn.isOnScreen = function() {
  var win = $(window);

  var viewport = {
    top: win.scrollTop(),
    left: win.scrollLeft()
  };
  viewport.right = viewport.left + win.width();
  viewport.bottom = viewport.top + win.height();

  var bounds = this.offset();
  bounds.right = bounds.left + this.outerWidth();
  bounds.bottom = bounds.top + this.outerHeight();

  return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

$(window).scroll(function() {
  if ($('.orange').isOnScreen() === true) {
    console.log("Element is in viewport")
  }
});

JQuery的

$scope.buttonClicked = function(){
   $scope.activeButton = !$scope.activeButton;
}

<强> Fidde