創建滾動酥料餅沒有滾動條

Question

所以我一直在試圖建立一個滾動酥料餅的同時隱藏滾動條，但它纔開始工作在Chrome感謝美麗：

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

我創建this Fiddle到演示。

我已經嘗試了許多建議的解決方案，其中包括this SO answer，但它不起作用（您可以看到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（金絲雀）
• 火狐38.0.5