Question

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

基本上我从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中添加一个class-attribute，但它不会。

在试图挤压死亡之后;）我发现，一旦屏幕的高度非常小，该类被添加，并且当它再次变大时消失。看起来很有趣......让我抓狂：D

Answer 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插件会自动为您创建一个。

iscroll / iscrollview自定义滚动条

HTML

脚本

1 个答案: