我这里有一个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>
答案 0 :(得分:0)
通过比较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
类中)
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;