滚动事件不点火 [英] Scroll event is not firing

问题描述

我要显示更多的图像，用户向下滚动浏览器window.I有
开创了that.But scroll事件指令不被炒鱿鱼。

  app.directive（'whenScrolled'，函数（）{
  返回功能（范围，榆树，ATTR）{
    变种原料=榆树[0];    elm.bind（'滚动'，函数（）{
      如果（raw.scrollTop + raw.offsetHeight＆GT; = raw.scrollHeight）{
        。范围$申请（attr.whenScrolled）;
      }
    }）;
  };
}）;
 

在LoadMoreItems，我推两个新项目进入榜单：

 函数LoadMoreItems（）{
  $ scope.temp = $ scope.allItems [$ scope.lastCount];  $ scope.items.push（{
    名称：$ scope.temp.Name，
    价格：$ scope.temp.Price，
    StockStatus：$ scope.temp.StockStatus，
    图片：$ scope.temp.Picture
  }）;
  $ scope.temp = $ scope.allItems [$ scope.lastCount + 1〕;
  $ scope.items.push（{
    名称：$ scope.temp.Name，
    价格：$ scope.temp.Price，
    StockStatus：$ scope.temp.StockStatus，
    图片：$ scope.temp.Picture
  }）;  $ scope.lastCount + = $ scope.count;
}
 

下面的功能将所有特​​定类别的项目。

 函数getAllItemss（猫）{
  itemsFactory.getSpecificItems（猫）
    .success（功能（_items）{
      $ scope.allItems = _items;      //$scope.items = [];
      $ scope.lastCount = 0;      LoadMoreItems（）;
    }）
    .error（功能（错误）{
      $ scope.status无法加载项：'= +返回Error.message;
    }）;
}
 

HTML

 ＆LT; D​​IV时，滚动=LoadMoreItems（）＆GT;＆LT; / DIV＆GT;
 

解决方案

从滚动文档：

  

的滚动事件被发送到一个元素，当用户滚动到一个
  不同的地方在元素。它适用于窗口对象，但也
  可滚动框架，并与溢出的元素 CSS属性集
  到滚动（或汽车当元素的明确的高度或宽度不足
  比高度或它的内容宽度）。​​

所以，尽量设置滚动在 DIV 或绑定事件侦听器的 $窗口对象（如 $（$窗口）.bind（'滚动，听众）），并根据它做你的计算。

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);
      }
    });
  };
});

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>

解决方案

From the scroll docs:

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).

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屋！