Is there a way to make a scrollable list show the scrollbar only on hover, while still allowing users to scroll with just one touch on mobile browsers like iOS and Android? I want it to behave as if the list always has overflow-y: auto. I've tried using this code snippet (http://codepen.io/sergdenisov/pen/RPazyg):
HTML:
<ul class="list js-list">
<li>Test Test Test Test Test Test Test Test Test</li>
...
<li>Test Test Test Test Test Test Test Test Test</li>
</ul>
CSS:
.list {
-webkit-overflow-scrolling: touch;
padding: 0 30px 0 0;
overflow: hidden;
height: 300px;
width: 300px;
background: gray;
list-style: none;
}
.list_scrollable {
overflow-y: auto;
}
Javascript:
$('.js-list').on({
'mouseenter touchstart': function() {
$(this).addClass('list_scrollable');
},
'mouseleave touchend': function() {
$(this).removeClass('list_scrollable');
}
});
Unfortunately, on mobile browsers, the scroll ability only activates after an additional tap on the list before scrolling. Any ideas on how to fix this?