創建沒有滾動條的可滾動彈出框

Question

因此，我一直試圖在隱藏滾動條的同時創建一個可滾動的彈出窗口，但是由於它的美麗，它只能在Chrome上運行：

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

我創建了這個小提琴來演示。

我已經嘗試了許多建議的解決方案，包括這個SO答案 ，但是它沒有用（您可以在我的小提琴中看到CSS建議的注釋）。

我真的很想在所有主流瀏覽器上都可以使用它（涵蓋了Chrome和Safari，需要FF / Opera / IE 9及更高版本）。

有什么建議么 ？

Answer 1

這可能不是最干凈的解決方案，但它可以工作 。

小提琴： http : //jsfiddle.net/VUZhL/1948/

在父項下添加一個子div （請記住為其添加結束標記！）

<div class="parent"><div class="child"><ul><li>Fixed header</li></ul><ul class="scrollable"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li></ul></div></div>

父母與子女的CSS

.parent {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.child {
 height: 100%;
 width: 115%; /* Use width to push scrollbar out of sight due using overflow:hidden above */
 overflow: auto;
}

經過測試

• Internet Explorer 11（技術預覽）
• 谷歌瀏覽器44.0.2376.0（金絲雀）
• Firefox 38.0.5