javascript - 仅通过悬停显示滚动条

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

我建议你只添加

  .list_scrollable {
      overflow-y: auto;
  }

作为手机的媒体查询 - 从而使其始终为真。或者按照其他答案的建议更改您的 CSS，使您的 JS 代码过时。