javascript - Show scrollbar only by hover -
i have scrollable list , want show scrollbar hover, want have ability scroll first touch on list on mobile browsers (ios, android) — behaviour list has overflow-y: auto
. try use code (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'); } });
but scroll ability on mobile browsers activates additional tap on list before scrolling. have ideas?
i suggest add
.list_scrollable { overflow-y: auto; }
as media query mobiles - making true. or change css other answer(s) have suggested, making js-code obsolete.
Comments
Post a Comment