0

In my angular application, I want a hidden scrollable div.

Below link for those who don't know how it how it look likes...

http://jsfiddle.net/5GCsJ/4713/

I have fixed-header and fixed-navigation in my application. Rest of all the content should come inside a scrollable div having scroll bar hidden.

This is how my project looks like

enter image description here

I want that red marked area inside scrollable div.

This is my main layout 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, I want the <router-outlet> should come inside the scrollable div.

I have tried this example code http://jsfiddle.net/5GCsJ/4713/ but this didn't work for me.

Then I tried this approach below but Its only working in Chrome, not in IE or FireFox.

  ::-webkit-scrollbar { 
    display: none; 
  }

Want something that should work in all browsers.

Yash Jain
  • 752
  • 1
  • 12
  • 34

1 Answers1

1

This is how you do it:

/* internet explorer and edge */
section {
  -ms-overflow-style: none;

}

/* chrome, safari and opera */
section::-webkit-scrollbar {
    display: none;
}
Diogo Capela
  • 5,669
  • 5
  • 24
  • 35