Jquery mobile - iscroll / iscrollview自定义滚动条

Question

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

基本上我是从isscroll - 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属性，但是它没有。

在尝试挤压酒吧死亡;)我发现类添加一旦屏幕的高度非常小，当它再次变大消失。看起来很有趣……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- iscroroll属性包含到div中来设置一个简单的iscroroll。如果您想添加更多自定义的iscroroll特性，请在data-iscroll=

之后将其包含在引号中。

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