Question

我正在使用Jquery inview插件，我试图在用户到达页面页脚时加载一些元素。在执行此操作时，我发现了一个错误，如果用户按住滚动单击并将鼠标拖向底部，在某些情况下，元素将不再加载，直到页脚离开视图然后返回到视图。到目前为止，当页脚在视口中时加载元素是以下函数：

//Infinite load function. Uses jquery.inview
    $scope.addMoreElements = function(){            
        $scope.limitElementsPerPage += 16;            
        $('.footer').on('inview', function(event, isInView) {
            if (isInView) {
                // element is now visible in the viewport                    
                $scope.limitElementsPerPage += 16;
            } else {
                // element has gone out of viewport
                //do nothing
            }
        });
    };

我正在为这个项目使用Angularjs和jQuery。从本质上讲，我认为我需要的是在元素仍在视野中时检查大约1-2秒。我现在不确定是否应该这样做。这就是我试图解决这个问题的方法：

$scope.$watch($('.footer'), function(){
        $('.footer').on('inview', function(event, isInView) {
            setTimeout(function(){
                while(isInView){
                    console.log('test')                
                }
            }, 1000);               
        });
    });

遗憾的是，这会导致浏览器崩溃（我不知道如何使用setTimeout或其他相关函数进行此操作）。

任何有关如何执行此操作的帮助或想法将不胜感激。

提前谢谢你。

Answer 1

InView为元素添加一个新事件，该元素在元素进入视口时触发。可能有时候你只是在视口中有页脚，所以这就是它失败的原因。

我认为您需要重新设计页面的逻辑，以便在包含添加项目的任何元素上使用'scroll'事件，并在无限视图中滚动以检查页脚是否在视口中，而不是它进入了。

我个人使用此扩展名来检查它是否在视口中：

(function($) {

   $.inviewport = function(element, settings) {
var wh=$(window).height();
var wst=$(window).scrollTop();
var et=$(element).offset().top;
var eh=$(element).height();
       return !(wh + wst <= et)&&!(wst >= et + eh);
   };

   $.extend($.expr[':'], {
       "in-viewport": function(a, i, m) {
           return $.inviewport(a);
       }
   });


})(jQuery);

Answer 2

以下是您可以使用的几个功能：

      var getScrollY = function(){
          var supportPageOffset = window.pageXOffset !== undefined;
          var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

          var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? 
                  document.documentElement.scrollTop : document.body.scrollTop;  
          return y;
      }

      function get_elem_y( elem ) {
          var box = elem.getBoundingClientRect();
          return box.top + getScrollY();
      }

然后你可以听滚动事件，假设页脚是<div id="footer">...</div>

  var footer = document.getElementById("footer"); // get footer
  var b_foot_visible = false;
  window.addEventListener("scroll", function() {
       var y = get_elem_y(footer);
       var pageHeight =  ( window.innerHeight || document.body.clientHeight);
       if((getScrollY() + pageHeight) > y ) {
            // footer is visible
            if(!b_foot_visible) {
                // TODO: add something
                b_foot_visible = true;
            }
       } else {
            // footer is not visible
            if(b_foot_visible) {
                // TODO: remove something
                b_foot_visible = false;
            }
       }
  });

因此，当scrollY +页面高度达到页脚元素Y坐标时，您可以执行某些操作来显示页脚的内容。

您也可以在开头添加检查以测试页脚是否已经可见。

元素在视图中时执行某些操作

2 个答案: