Question

你可以告诉我当用户滚动到顶部时如何获取事件。实际上我在我的例子中使用ng-repeat。我想在用户滚动到底部并滚动到顶部时获得事件。我有一个div其中我使用ng-repeat可以在滚动后用户移动到顶部时获得顶级事件。实际上我需要在用户滚动到角度的div底部和顶部时显示警告。这是我的代码

Traceback (most recent call last):
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1836, in __call__
    return self.wsgi_app(environ, start_response)
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1820, in wsgi_app
    response = self.make_response(self.handle_exception(e))
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1403, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1817, in wsgi_app
    response = self.full_dispatch_request()
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1477, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1381, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1475, in full_dispatch_request
    rv = self.dispatch_request()
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1461, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "/Users/lanceguinto/Documents/Project_Omnimoda/API/app/items/items.py", line 26, in get_item_by_code
    items_request = db.query(q_list_all, a_list_all)
  File "/Users/lanceguinto/Documents/Project_Omnimoda/API/app/config.py", line 15, in query
    cursor.execute(sql, values)
  File "build/bdist.macosx-10.10-intel/egg/MySQLdb/cursors.py", line 187, in execute
    query = query % tuple([db.literal(item) for item in args])
TypeError: not all arguments converted during string formatting

Answer 1

您可以将指令放在可滚动的div上，听取scroll事件，并检查是否达到了顶部或底部。

因此，使用您的HTML，您的div将如下所示：

<div exec-on-scroll-to-top="ctrl.handleScrollToTop"
     exec-on-scroll-to-bottom="ctrl.handleScrollToBottom"
     style="width:90%;height:150px;border:1px solid red;overflow:auto">
  <div ng-repeat="n in name">{{n.name}}</div>
</div>

添加了新指令exec-on-scroll-to-top和exec-on-scroll-to-bottom。每个都指定控制器中的一个函数，该函数应该在指令检查的特定事件发生时执行。

exec-on-scroll-to-top看起来像这样，只是检查可滚动div的scrollTop属性为0：

myapp.directive('execOnScrollToTop', function () {

  return {

    restrict: 'A',
    link: function (scope, element, attrs) {
      var fn = scope.$eval(attrs.execOnScrollToTop);

      element.on('scroll', function (e) {

        if (!e.target.scrollTop) {
          console.log("scrolled to top...");
          scope.$apply(fn);
        }

      });
    }

  };

});

exec-on-scroll-to-bottom看起来像这样（请记住，元素在(scrollHeight - scrollTop) === clientHeight时完全滚动）：

myapp.directive('execOnScrollToBottom', function () {

  return {

    restrict: 'A',
    link: function (scope, element, attrs) {
      var fn = scope.$eval(attrs.execOnScrollToBottom),
          clientHeight = element[0].clientHeight;

      element.on('scroll', function (e) {
        var el = e.target;

        if ((el.scrollHeight - el.scrollTop) === clientHeight) { // fully scrolled
          console.log("scrolled to bottom...");
          scope.$apply(fn);
        }
      });
    }

  };

});

Here's a plunk。当滚动到达顶部或底部时，打开控制台以查看记录的消息。

Answer 2

这是一种非角度方式，但您可以将其包装在一个允许重用的指令中：

使用Javascript事件监听器：

div.addEventListener('scroll', function(){
    if(this.scrollTop===0)
    //do your stuff

}）;

如果对此侦听器中的范围变量进行了任何更改，请确保使用$apply。

当用户在角度js中滚动到顶部时如何获取事件？

2 个答案: