Angular - 如果有滚动条,则添加类

时间:2017-03-22 10:49:23

标签: angularjs scroll

我这里有一个jsfiddle - https://jsfiddle.net/r6Lff67n/

这里没有Angular,只是结构的一个例子。

我有一个最大高度的外部div,如果内容大于周围的div,则内容可以滚动。

我的问题是,如果使用滚动条,Angular中有一个简单的方法来添加一个类,所以如果它会滚动,我可以设置不同的样式

    <div class="scroll-outer">
      <div class="scroll-inner">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
      </div>
    </div>

1 个答案:

答案 0 :(得分:0)

通过比较scrollHeightclientHeight元素,可以轻松找到DOM对象是否有滚动条。

所以,我提出了一个可以比较这些高度的directive并将一个类添加到它所绑定的元素中。类似的东西:

var myApp = angular.module('myApp', []);
myApp.directive("testDirective", function() {
  return {
    link: function(scope, elem, attrs) {
      if (elem[0].clientHeight < elem[0].scrollHeight) {
        // scrollbar available
        // adding a custom class with sample CSS
        elem[0].classList += " mytest"
      }
    }
  }
})

此外,可以使用class directive来自定义自定义attrs个名称。

这是可运行的可运行代码段和updated fiddle

请注意,两个块列表中的一个块具有mytest类的CSS(边框),具体取决于它是否具有滚动条。您可以在那里添加自定义CSS(在mytest类中)

&#13;
&#13;
var myApp = angular.module('myApp', []);
myApp.directive("testDirective", function() {
  return {
    link: function(scope, elem, attrs) {
      if (elem[0].clientHeight < elem[0].scrollHeight) {
        // scrollbar available
        // adding a custom class with sample CSS
        elem[0].classList += " mytest"
      }
    }
  }
})
&#13;
.block {
  background: red;
  height: 50px;
  margin-bottom: 2px;
}

.scroll-outer {
  overflow-y: auto;
  max-height: 200px;
  width: 250px;
  display: inline-block
}

.mytest {
  border: 3px solid black /* change this as you wish */
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div class="scroll-outer" test-directive>
    <div class="scroll-inner">
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </div>
  
  <div class="scroll-outer" test-directive>
    <div class="scroll-inner">
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </div>
</body>
&#13;
&#13;
&#13;