仅通过悬停显示滚动条答案

【问题标题】：Show scrollbar only by hover仅通过悬停显示滚动条
【发布时间】：2015-07-27 13:02:48
【问题描述】：

我有可滚动列表，只想通过悬停来显示滚动条，但我也希望能够通过 first touch 在移动浏览器（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');
    }
});

但移动浏览器上的滚动功能只能通过在滚动前额外点击列表来激活。有什么想法吗？

【问题讨论】：

尝试mouseover 而不是mouseenter
想想你为什么要这样做。现在想想那里有很多人实际上使用滚动条来滚动。如果没有滚动条供他们查看，他们将如何滚动您的内容？
请记住，ALL 演示代码（HTML、CSS、JS）只是建议。浏览器或足够熟练的用户可以随意忽略您的任何格式。正如@NiettheDarkAbsol 所说，这对您的用户有什么价值？如果你不能回答，那就不要这样做。
@Vinc199789 有什么区别？ touchstart 在mouseenter 和mouseover 之前触发，通常在移动浏览器上——patrickhlauke.github.io/touch/tests/results。
@NiettheDarkAbsol 是的，我想过。这不是我的愿望，但我公司的设计师想要这种行为。我正在寻找它的可能性，也许我不会这样做。

标签： javascript jquery html css scroll

【解决方案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>

【讨论】：

你试过了吗？它在 iOS Safari 中不起作用——滚动被阻止，codepen.io/sergdenisov/full/vOGomj。
您可以将overflow-y 更改为scroll。它在 iOS 中被称为 bug。或者为了更好的结果，只需给overflow 而不是overflow-y 并将.list > li max-width 设置为100%
我不需要overflow: scroll，它总是会在:hover 上显示滚动，即使项目不会溢出列表。而且您的解决方案无法再次运行 - codepen.io/sergdenisov/pen/rVLeeG。请务必在给出建议之前自己尝试一下。
感谢您的 sn-p，所以现在我明白您的意思了。用 sn-p 查看我的更新答案，或者这个 sn-p codepen.io/redy/pen/aOZNpK
它的工作方式与我的问题中的示例相同。我需要在第一次触摸时激活滚动，而不是第一次点击。

【解决方案2】：

我建议你添加

  .list_scrollable {
      overflow-y: auto;
  }

作为移动设备的媒体查询 - 从而使其始终正确。或者按照其他答案的建议更改您的 CSS，使您的 JS 代码过时。

【讨论】：

虽然我不同意这样隐藏滚动条的做法，但这个答案是一种很好的处理方式。
什么是手机媒体查询？它仅基于屏幕宽度？这不够。我可以在 iPad 上横向获取屏幕宽度 = 1024px，它也是桌面屏幕宽度。