Question

我这里有一个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>

Answer 1

通过比较scrollHeight和clientHeight元素，可以轻松找到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;

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;

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

1 个答案: