如何制作一个像iPhone一样的浮动滚动条？

Question

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

有人有任何指点吗？

Answer 1

首先，我将从一些选项开始。 Azoff 有一个可滚动插件来帮助您入门。

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

.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() 事件来隐藏/显示，只需注意隐藏或显示将导致滚动本身，从而导致无限事件循环。您需要对回调进行一些检查，以确保它不是导致滚动事件的滚动条隐藏（它是在拖动时......所以鼠标向上并滚轮检查？）。