如何在将特定 css 属性应用于 dom 时自动应用类
Posted
技术标签:
【中文标题】如何在将特定 css 属性应用于 dom 时自动应用类【英文标题】：How to auto apply a class when a particular css property is applied to the dom 【发布时间】：2017-05-10 19:28:16 【问题描述】：我需要在我的应用程序中设置自定义滚动条。我已经在我定义的类中使用 -webkit-scrollbar 实现了这一点 - 'scroll-bar'。现在我必须将这个类应用到我所有需要 overflow: auto 的 div 中。相反，在 Angular 或 jQuery 或 scss 中是否有任何方法可以让我的doms 可以在设置溢出属性时自动使用“滚动条”类？
我在这里提供了一个演示，以便您更好地理解。 请帮忙！
.scrollbar-container
margin: 30px;
float:left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
border:1px solid tomato;
.force-overflow
height: 550px;
.scroll-bar::-webkit-scrollbar-track
//box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border:0.5px solid #bababa;
border-radius: 5px;
background-color: #F1F2F7;
.scroll-bar::-webkit-scrollbar
width: 8px;
height:8px;
background-color: #F5F5F5;
.scroll-bar::-webkit-scrollbar-thumb
border-radius: 5px;
background-color: green;
<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
</head>
<body>
<div class="scrollbar-container scroll-bar" >
<div class="force-overflow"></div>
</div>
<div class="scrollbar-container scroll-bar" >
<div class="force-overflow"></div>
</div>
<div class="scrollbar-container scroll-bar" >
<div class="force-overflow"></div>
</div>
</body>
</html>【问题讨论】：
无论您在哪里需要自定义滚动条，都可以在该元素中添加“.scroll-bar”类 我认为您必须将滚动设置为所有具有自动溢出功能的 div。所以你可以检查一下它可能对你有帮助。 ***.com/questions/2059743/… @Sharmila 和@Vijay，感谢您的努力:) 我正在按照您所说的做。但是在一个由更多开发人员开发的大型应用程序中，如果我们将此滚动作为一个组件通用，那就太好了。所以无论何时使用溢出：自动通用类：滚动条都会自动配置它。我需要一个解决方案.. 【参考方案1】：$(document).ready(function()
$('.scrollbar-container').each(function()
if ($(this).css('overflow') == 'auto')
console.log('1');
);
);.scrollbar-container
margin: 30px;
float:left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
border:1px solid tomato;
.force-overflow
height: 550px;
.scroll-bar::-webkit-scrollbar-track
//box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border:0.5px solid #bababa;
border-radius: 5px;
background-color: #F1F2F7;
.scroll-bar::-webkit-scrollbar
width: 8px;
height:8px;
background-color: #F5F5F5;
.scroll-bar::-webkit-scrollbar-thumb
border-radius: 5px;
background-color: green;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp" >
<head>
</head>
<body>
<div class="scrollbar-container scroll-bar">
<div class="force-overflow">
</div>
</div>
<div class="scrollbar-container scroll-bar" >
<div class="force-overflow"></div>
</div>
<div class="scrollbar-container scroll-bar" >
<div class="force-overflow"></div>
</div>
</body>
</html>【讨论】：
我很感激.. 谢谢！以上是关于如何在将特定 css 属性应用于 dom 时自动应用类的主要内容，如果未能解决你的问题，请参考以下文章