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

时间:2010-02-02 02:50:56

标签: jquery iphone scroll scrollbar widget

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

有人有任何指示吗?

1 个答案:

答案 0 :(得分: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()事件来隐藏/显示,只是隐藏或显示将导致滚动本身,导致无限的事件循环。你需要在回调上设置一些检查,以确保它不是导致滚动事件的滚动条隐藏(它是在拖动...所以鼠标向上和滚轮检查?)。