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代码过时。

Answer 2

请注意，在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>

仅通过悬停显示滚动条

2 个答案: