Показать полосу прокрутки только на hover

Question

У меня есть прокручиваемый список и вы хотите показывать полосу прокрутки только с помощью наведения, но я также хочу иметь возможность прокручивать по первый штрих в списке на мобильных браузерах (iOS, Android) - поведение, подобное списку всегда имеет overflow-y: auto. Я пытаюсь использовать этот код (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'); 
    } 
}); 

Но функция прокрутки в мобильных браузерах активируется только при повторном нажатии на список перед прокруткой. Есть идеи?

Answer 1

Помните, что на устройстве iOS overflow-y должно быть scroll.

$(".list").on("touchstart touchend", function(){ 
 
    $(this).toggleClass("scroll"); 
 
})

.list { 
 
    -webkit-overflow-scrolling: touch; 
 
    padding: 0 30px 0 0; 
 
    overflow: hidden; 
 
    height: 300px; 
 
    width: 300px; 
 
    background: gray; 
 
    list-style: none; 
 
} 
 

 
.list { 
 
    /* Your CSS */ 
 
    overflow: hidden; 
 
} 
 
.list > li { 
 
    max-width: 100%; 
 
} 
 
.list:active, .list:focus, .list:hover, .list.scroll { 
 
    overflow-y: scroll; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<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> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
    <li>Test Test Test Test Test Test Test Test Test</li> 
 
</ul>

Answer 2

Я хотел бы предложить вам просто добавить

.list_scrollable { 
     overflow-y: auto; 
    } 

в качестве медиа-запроса для мобильных телефонов - таким образом, делая это всегда верно. Или измените свой CSS, как предложили другие ответы, сделав ваш JS-код устаревшим.