Angularjs independent scrolls for different div

Question

I have two divs in my angular project. I want the two divs to have independent scroll bars.

The divs are constructed like this.

<div ng-show="$state.includes('base.videolist')||$state.includes('base.movielist')">
   <ul class="nav navbar-fixed-top roboto nav-tabs">
      <li ui-sref="base.videolist" ui-sref-active="active"><a>Videos</a></li>
      <li ui-sref="base.movielist" ui-sref-active="active"><a>Movies</a></li>
   </ul>
</div>

<div id="bvl" class="scrol_sctn"  ui-view="videolist" ng-init="pullFingerprintData()" ng-show="$state.includes('base.videolist')"></div>
<div id="bml" class="scrol_sctn"  ui-view="movielist" ng-show="$state.includes('base.movielist')"></div>
<div id="vpl" class="cdnfullscreen" ui-view="videoplayer" ng-show="$state.includes('base.videoplayer')"></div>

I want the divs bvl and bml to have independent scrolls. This is my css file.

body {
    background:#a5c8f3 !important;
    font-family: 'Raleway', sans-serif;
    padding-top: 50px;
    overflow: hidden;
}
.scrol_sctn { 
    margin:0; 
    padding:0;
    overflow-y: auto;
    overflow-x: hidden;
}

I hid the scroller for the body tag so that I can have independent tags for the bml and bvl tags. But doing this stops the entire page from using scrolls. Any help to achieve this is much appreciated.

I think if you add overflow-y: scroll into each particular div you will be able to do what you want. — Facundo La Rocca
– Facundo La Rocca, Commented Jan 17, 2017 at 17:28
Do you want me to change overflow-y: auto to scroll in the class scrol_sctn? I did that and it still the page isn't scrolling. — 55597
– 55597, Commented Jan 17, 2017 at 17:31
Take a look at this fiddle. Let me know if it is what you are looking for. I dont use AngularJS so I cant duplicate the code you have provided. — Facundo La Rocca
– Facundo La Rocca, Commented Jan 17, 2017 at 17:35
Yes. This is exactly what i need. Let me try to rip off the code that i use in html from angular and test the css in a plain setup and post the result — 55597
– 55597, Commented Jan 17, 2017 at 20:43

55597 · Accepted Answer · 2017-01-17 22:23:16Z

1

I added height to the child div and it started working as expected.

.scrol_sctn { 
    margin:30; 
    padding:100;
    height:100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

edited Jan 17, 2017 at 22:23

answered Jan 17, 2017 at 21:19

55597

2,1321 gold badge24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs independent scrolls for different div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related