iscroll / iscrollview 自定义滚动条答案

【问题标题】：iscroll / iscrollview custom scrollbariscroll / iscrollview 自定义滚动条
【发布时间】：2013-03-20 08:17:28
【问题描述】：

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

基本上我从 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

【问题讨论】：

标签： jquery-mobile scrollbar customization iscroll4 iscroll

【解决方案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 插件会自动为您创建一个。

【讨论】：