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（技术预览版）
Google Chrome 44.0.2376.0（金丝雀）
Firefox 38.0.5

在没有滚动条的情况下创建可滚动弹出窗口

1 个答案: