html - 隐藏的可滚动 div，应该适用于所有浏览器

Question

在我的 Angular 应用程序中，我想要一个隐藏的可滚动 div。

以下链接供那些不知道它看起来如何的人...

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

我的应用程序中有固定标题和固定导航。其余所有内容应位于隐藏滚动条的可滚动 div 中。

这是我的元素的样子

我想要可滚动 div 中的红色标记区域。

这是我的主要布局 html 文件。

<sa-header></sa-header>


<sa-navigation></sa-navigation>


<div id="main" role="main">

<sa-ribbon></sa-ribbon>

<router-outlet></router-outlet>

</div>

在这里，我想要 <router-outlet>应该在可滚动的 div 内。

我试过这个示例代码 http://jsfiddle.net/5GCsJ/4713/但这对我不起作用。

然后我尝试了下面的这种方法，但它只适用于 Chrome，不适用于 IE 或 FireFox。

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

想要在所有浏览器中都能正常工作的东西。

Answer 1

这是你的做法:

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

}

/* chrome, safari and opera */
section::-webkit-scrollbar {
    display: none;
}