如何创建像iPhone上的浮动滚动条？

Question

我正在创建一个手指友好的网络应用程序，并且滚动条出现问题。理想情况下，我正在尝试重新创建iPhone的实现，其中滚动条仅在用户滚动内容时显示，并在滚动停止时消失。

有人有任何指示吗？

Answer 1

首先，我从一些选项开始。 Azoff有scrollable plugin to get you started。

最重要的是，从插件中删除它：

.css({"cursor":"url("+o.icons.open+"), default", "overflow-y": "auto"})

替换为：

.css({"cursor":"url("+o.icons.open+"), default"})

在您的代码中，使用插件页面作为示例：

$(function() {
  $("#overscroll").overscroll();
  $("#overscroll").hover(
    function() { $(this).css({'overflow-y':'scroll'}); },
    function() { $(this).css({'overflow-y':'hidden'}); }
  );
});

这显示悬停滚动。您可以装配$("#overscroll").scroll()事件来隐藏/显示，只是隐藏或显示将导致滚动本身，导致无限的事件循环。你需要在回调上设置一些检查，以确保它不是导致滚动事件的滚动条隐藏（它是在拖动...所以鼠标向上和滚轮检查？）。