Создание Scrollable поповера Без

Question

полосы прокрутки Так я пытался создать прокрутку поповер, скрывая скроллбар, но это только работает на Chrome, благодаря прекрасному:

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

Я создал this Fiddle для продемонстрировать.

Я пробовал много предлагаемых решений, в том числе this SO answer, но это не сработало (вы можете увидеть, что CSS предложил прокомментировать в моей скрипке).

Я бы очень хотел, чтобы эта работа работала во всех основных браузерах (Chrome & Safari покрыты, нужны FF/Opera/IE 9 и выше).

Любые предложения?

Answer 1

Это может быть не самое чистое решение, но работает.

Fiddle: 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 (Technical Preview)
• Google Chrome 44.0.2376.0 (канарейки)
• Firefox 38.0.5