Question

我需要在我的应用程序中设置自定义滚动条。我已经在我定义的类中使用 -webkit-scrollbar 实现了这一点 - ＆＃39;滚动条＆＃39;。现在我必须将这个类应用于我的所有div，它需要 overflow：auto 。相反，有没有任何方式在Angular或jQuery或scss，我的doms可以采取＆＃39;滚动条＆＃39;每当溢出属性设置为它时自动类？

我在这里给出了一个演示，以便您更好地理解。请帮忙！

＆＃13;

.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;
	
}

＆＃13;

<!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>

＆＃13;

Answer 1

＆＃13;

$(document).ready(function(){


  $('.scrollbar-container').each(function(){
  

  if ($(this).css('overflow') == 'auto'){
       console.log('1');
    }
  
  });
});

＆＃13;

.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;
	
}

＆＃13;

<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>

＆＃13;

如何在将特定css属性应用于dom时自动应用类

1 个答案: