创建一个没有滚动条的可滚动弹出框
Creating a Scrollable Popover Without Scrollbar
所以我一直在尝试创建一个可滚动的弹出窗口,同时隐藏滚动条,但它只在 Chrome 上工作,多亏了漂亮的:
::-webkit-scrollbar {
display:none;
}
我创建了 this Fiddle 来演示。
我已经尝试了很多建议的解决方案,包括 this SO answer,但它没有用(你可以看到 CSS 建议在我的 fiddle 中被注释掉了)。
我真的很想让它在所有主流浏览器中运行(Chrome 和 Safari 都包括在内,需要 FF/Opera/IE 9 及更高版本)。
有什么建议吗?
这可能不是最干净的解决方案,但它有效。
Fiddle: http://jsfiddle.net/VUZhL/1948/
在parent下面加一个childdiv(记得给它加上结束标记!)
<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 和 child
.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(金丝雀)
- 火狐 38.0.5
所以我一直在尝试创建一个可滚动的弹出窗口,同时隐藏滚动条,但它只在 Chrome 上工作,多亏了漂亮的:
::-webkit-scrollbar {
display:none;
}
我创建了 this Fiddle 来演示。
我已经尝试了很多建议的解决方案,包括 this SO answer,但它没有用(你可以看到 CSS 建议在我的 fiddle 中被注释掉了)。
我真的很想让它在所有主流浏览器中运行(Chrome 和 Safari 都包括在内,需要 FF/Opera/IE 9 及更高版本)。
有什么建议吗?
这可能不是最干净的解决方案,但它有效。
Fiddle: http://jsfiddle.net/VUZhL/1948/
在parent下面加一个childdiv(记得给它加上结束标记!)
<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 和 child
.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(金丝雀)
- 火狐 38.0.5