I need to create a hidden scrollable div in my angular application.
For those unfamiliar with how it looks, check out the following link:
http://jsfiddle.net/5GCsJ/4713/
My application has a fixed-header and fixed-navigation. I want all other content to be within a scrollable div with a hidden scroll bar.
This is the visual layout of my project:
https://i.sstatic.net/rJW0S.jpg
I specifically want the red marked area to be inside the scrollable div.
This is the structure of my main HTML file:
<sa-header></sa-header>
<sa-navigation></sa-navigation>
<div id="main" role="main">
<sa-ribbon></sa-ribbon>
<router-outlet></router-outlet>
</div>
In this structure, I want the <router-outlet> to be placed inside the scrollable div.
I have attempted to use the example code from http://jsfiddle.net/5GCsJ/4713/, but it did not work for me.
I then tried a different approach that only worked in Chrome, not in IE or Firefox:
::-webkit-scrollbar {
display: none;
}
I am looking for a solution that will work across all browsers.