滚动指令在Angular JS中不起作用

Scroll Directive Not Working in Angular JS

本文关键字：不起作用 JS Angular 指令 滚动      更新时间：2023-09-26

很抱歉问了这个愚蠢的问题。我是角JS的新手。我从中找到了一个很好的小滚动指令http://jsfiddle.net/88TzF/622/但当我创建以下HTML时，它不起作用下拉示例

      <ul class="dropdown-menu Container" scroll>
              <div >
          <li ng-repeat="i in items"><a href="#">{{i.value}}</a></li>
                  </div>
        </ul>

      </div>

但是如果我执行jQueryWay滚动事件，如果触发。你能告诉我出了什么问题吗。

Items数组有700多个对象。所以它正在溢出。

    .Container
{
    height: 300px;
    overflow: scroll;
}

提前谢谢。

您正在将滚动事件绑定到窗口，但我假设您正在滚动下拉容器？

如果是这种情况，则必须将滚动事件绑定到下拉容器，并在If语句中检查this.scrollTop。

然而，不要忘记取消绑定滚动事件，因为angular将无法独自处理此问题。

app = angular.module('myApp', []);
  app.directive("scroll", function ($window) {
      return function(scope, element, attrs) {
          element.on("scroll", function() {
               if (this.scrollTop >= 100) {
                   scope.boolChangeClass = true;
                   console.log('Scrolled below header.');
               } else {
                   scope.boolChangeClass = false;
                   console.log('Header is in view.');
               }
              scope.$apply(); // Prefer scope.$digest()!
          });
        
        scope.$on('$destroy', function () {
          element.off('scroll');
        });
      };
  });
.dropdown-container {
  height: 300px;
  border: 1px solid black;
  overflow: auto;
}
ul {
  padding: 0;
  margin: 0;
}
li {
  list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" class="test">
  <div class="dropdown-container" scroll>
    <ul class="dropdown-menu">
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
    </ul>
  </div>
</div>

相关文章：