How to auto apply a class when a particular css property is applied to the dom

Question

I have a requirement of setting custom scroll bar in my application. I have achieved that using -webkit-scrollbar in a class defined by me - 'scroll-bar'. Now I have to apply this class to all my div which takes overflow: auto. Instead, is there any way in Angular or jQuery or scss, that my doms could take the 'scroll-bar' class automatically whenever overflow property is set to it?

I have given a demo here for your better understanding. Please help!

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

Where ever you need custom scroll bar add the class '.scroll-bar' in that element — Sharmila, Dec 26 '16 at 10:41
I think you have to set scroll to all divs that have overflow auto. So you can check this it may be helpful to you. http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery — Vijay Maheriya, Dec 26 '16 at 10:59
@Sharmila and @ Vijay,Thanks for your effort:) am doing the same what you told. But in a huge application developed by more developers, it would be great if we make this scroll generic as a component.. So whoever, whenever use overflow : auto the generic class: scroll-bar would automatically configured to it.. I need a solution for that.. — Suresh PMS, Dec 26 '16 at 11:25

score 2 · Answer 1 · answered Dec 26 '16 at 12:56

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

How to auto apply a class when a particular css property is applied to the dom

1 Answers1