Creating a Scrollable Popover Without Scrollbar

Question

So I've been trying to create a scrollable popover while hiding the scrollbar, but it's only been working on Chrome thanks to the beautiful:

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

I've created this Fiddle to demonstrate.

I've tried many suggested solutions, including this SO answer, but it didn't work (you can see the CSS suggested commented out in my fiddle).

I'd really like to get this working in all major browsers (Chrome & Safari are covered, need FF/Opera/IE 9 and above).

Any suggestions ?

Answer 1

This may not be the cleanest solution, but it works.

Fiddle: http://jsfiddle.net/VUZhL/1948/

Add a child div under the parent (remember to add closing tag for it!)

<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 for parent and 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;
}

Tested on

• Internet Explorer 11 (Technical Preview)
• Google Chrome 44.0.2376.0 (canary)
• Firefox 38.0.5