滚动事件未触发 [英] Scroll event is not firing

问题描述

当用户向下滚动浏览器窗口时，我必须显示更多图像.我有为此创建了一个指令.但滚动事件没有被触发.

I have to display more images as the user scrolls down the browser window.I have created a directive for that.But scroll event is not getting fired.

app.directive('whenScrolled', function() {
  return function(scope, elm, attr) {
    var raw = elm[0];

    elm.bind('scroll', function() {
      if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
        scope.$apply(attr.whenScrolled);
      }
    });
  };
});

在 LoadMoreItems 中，我将两个新项目推入列表:

In LoadMoreItems, I am pushing two new items into the list:

function LoadMoreItems() {
  $scope.temp = $scope.allItems[$scope.lastCount];

  $scope.items.push({
    Name: $scope.temp.Name,
    Price: $scope.temp.Price,
    StockStatus: $scope.temp.StockStatus,
    Picture: $scope.temp.Picture
  });
  $scope.temp = $scope.allItems[$scope.lastCount + 1];
  $scope.items.push({
    Name: $scope.temp.Name,
    Price: $scope.temp.Price,
    StockStatus: $scope.temp.StockStatus,
    Picture: $scope.temp.Picture
  });

  $scope.lastCount += $scope.count;
}

下面的函数带来了特定于该类别的所有项目.

The below function brings all the items specific to the category.

function getAllItemss(cat) {
  itemsFactory.getSpecificItems(cat)
    .success(function(_items) {
      $scope.allItems = _items;

      //$scope.items = [];
      $scope.lastCount = 0;

      LoadMoreItems();
    })
    .error(function(error) {
      $scope.status = 'Unable to load items : ' + error.message;
    });
}

HTML:

<div when-Scrolled="LoadMoreItems()"></div>

推荐答案

来自 scroll 文档:

scroll 事件在用户滚动到某个元素时发送到元素元素中的不同位置.它适用于 window 对象，但也适用于到带有 overflow CSS 属性集的可滚动框架和元素到 scroll (或 auto 当元素的显式高度或宽度小于比其内容的高度或宽度).

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

因此，尝试在 div 上设置 scroll css 属性，或将事件侦听器绑定到 $window 对象(例如 $($window).bind('scroll',listener))并根据到它.

So, try to set scroll css property on your div, or bind event listener to $window object(e.g. $($window).bind('scroll',listener)) and do your calculation according to it.

这篇关于滚动事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！