1

我阅读了文档，试图理解演示，但仍然没有自定义滚动条。

基本上我从 iScroll-Custom-Scrollbar 复制了演示代码：

HTML

<div class="demo-page" data-role="page" id="test-page">

  <div data-role="header">
<h1>Header</h1>
  </div><!-- /header -->

  <div data-iscroll="" data-role="content" id="wrapper">

    <div class="iscroll-pulldown"></div><!--iScroll-Pulldown-->

    <ul data-role="listview" id="thelist">
        <li>Item 1 culpa aut nam qui</li>
        <li>Item 2 minima quam temporibus quidem</li>
        <li>Item 3 commodi sint facilis numquam</li>
    </ul>
 </div><!--wrapper-->
 </div><!--page-->

脚本

<script type="text/javascript">
var myScroll;
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
</script>

实际上应该将一个类属性添加到滚动条的 div 中，但它没有。

在尝试将栏挤死后；）我发现只要屏幕的高度非常小，就会添加该类，而当它再次变大时就会消失。看起来很有趣......让我发疯：D

4

1 回答 1

1

看起来您正在不正确地初始化 iscrollview。

试试这个

<div class="demo-page" data-role="page" id="test-page">

  <div data-role="header">
<h1>Header</h1>
  </div><!-- /header -->

  <div data-role="content" data-iscroll='{"scrollbarClass": "myScrollbar"}'>

    <div class="iscroll-pulldown"></div><!--iScroll-Pulldown-->

    <ul data-role="listview" id="thelist">
        <li>Item 1 culpa aut nam qui</li>
        <li>Item 2 minima quam temporibus quidem</li>
        <li>Item 3 commodi sint facilis numquam</li>
    </ul>
 </div><!--wrapper-->
 </div><!--page-->

现在放弃脚本标签中的代码，它是不需要的。

使用 iscrollview 的全部意义在于你不需要在 javascript 中做任何事情。您可以通过将 data-iscroll 属性包含到 div 来设置一个简单的 iscroller。如果您想添加更多自定义的 iscroll 功能，请将其包含在 data-iscroll= 之后的引号中

您也不需要指定包装器元素，因为 iscrollview 插件会自动为您创建一个。

于 2013-03-20T00:17:28.460 回答