Since we've had web browsers and JavaScript, we've been intent on replacing native browser functionalities, and for many reasons. Whether it be that the native look or functionality is ugly, doesn't work the same across browsers, or isn't as feature-rich as it should be, we've always pushed the browser's limits to do better. One functionality we've tried desperately to emulate is scrollbars. iScroll , a fairly new scrolling lib, has done an exceptional job in emulating scrolling both within desktop and mobile browsers. iScroll also allows for scrolling of elements with overflow on older versions of Mobile Safari. Let's have a look at iScroll!

The HTML

iScroll requires a two-DIV pattern for declaring where iScroll will be used. The first DIV is the wrapper, the second DIV is the scrollable area:

  1. <div id="wrapper">
  2. <div id="scroller">
  3. <div style="padding:15px 30px;"> <!-- padding for content -->
  4.  
  5. <!-- content goes here -->
  6.  
  7. </div>
  8. </div>
  9. </div>
  1.  

iScroll will create and inject the scrollbar within the wrapper DIV. The content is held within the scroller DIV.

The CSS

The CSS is where iScroll can get a bit fuzzy. For iScroll to work optimally, both the wrapper and scroller DIVs need to be positioned absolutely and be styled to widths of 100%:

  1. #wrapper {
  2. position:absolute;
  3. z-index:1;
  4. top:0;
  5. bottom:0;
  6. left:0;
  7. width:100%;
  8. overflow:auto;
  9. }
  10.  
  11. #scroller {
  12. position:absolute; z-index:1;
  13. /*    -webkit-touch-callout:none;*/
  14. -webkit-tap-highlight-color:rgba(0,0,0,0);
  15. width:100%;
  16. padding:0;
  17. }
  1.  

As a result, the third DIV of the structure needs the contain enough padding-right to keep the text and scrollbar far enough way from each other. Be sure to position those elements properly or iScroll wont work at all (as I found out the hard way) !

The JavaScript

The most obvious piece of using iScroll is including its .js file:

  1. <script type="text/javascript" src="iscroll/src/iscroll.js"></script>
  1.  

With iScroll now available within the page, the next step is creating the iScroll instance that suits the needs of your desired usage. The most simple of uses provides only the wrapper ID:

  1. var scroller = new iScroll('wrapper');

Awesome; the page's native scrollbar disappears and is replaced by an iOS-style scrollbar! But like every good JavaScript lib, iScroll provides a host of features that allow you to customize your scrollbar. Options include setting flags for bounce, momentum, fade and hide settings, and whether scrollbars should be allowed both vertically and horizontally. Here's another example of how you can create a pull-to-refresh scrollbar:

  1. var myScroll,
  2. pullDownEl, pullDownOffset,
  3. pullUpEl, pullUpOffset,
  4. generatedCount = 0;
  5.  
  6. function pullDownAction () {
  7. setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
  8. var el, li, i;
  9. el = document.getElementById('thelist');
  10.  
  11. for (i=0; i<3; i++) {
  12. li = document.createElement('li');
  13. li.innerText = 'Generated row ' + (++generatedCount);
  14. el.insertBefore(li, el.childNodes[0]);
  15. }
  16.  
  17. myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
  18. }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
  19. }
  20.  
  21. function pullUpAction () {
  22. setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
  23. var el, li, i;
  24. el = document.getElementById('thelist');
  25.  
  26. for (i=0; i<3; i++) {
  27. li = document.createElement('li');
  28. li.innerText = 'Generated row ' + (++generatedCount);
  29. el.appendChild(li, el.childNodes[0]);
  30. }
  31.  
  32. myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
  33. }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
  34. }
  35.  
  36. function loaded() {
  37. pullDownEl = document.getElementById('pullDown');
  38. pullDownOffset = pullDownEl.offsetHeight;
  39. pullUpEl = document.getElementById('pullUp');
  40. pullUpOffset = pullUpEl.offsetHeight;
  41.  
  42. myScroll = new iScroll('wrapper', {
  43. useTransition: true,
  44. topOffset: pullDownOffset,
  45. onRefresh: function () {
  46. if (pullDownEl.className.match('loading')) {
  47. pullDownEl.className = '';
  48. pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
  49. } else if (pullUpEl.className.match('loading')) {
  50. pullUpEl.className = '';
  51. pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
  52. }
  53. },
  54. onScrollMove: function () {
  55. if (this.y > 5 && !pullDownEl.className.match('flip')) {
  56. pullDownEl.className = 'flip';
  57. pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
  58. this.minScrollY = 0;
  59. } else if (this.y < 5 && pullDownEl.className.match('flip')) {
  60. pullDownEl.className = '';
  61. pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
  62. this.minScrollY = -pullDownOffset;
  63. } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
  64. pullUpEl.className = 'flip';
  65. pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
  66. this.maxScrollY = this.maxScrollY;
  67. } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
  68. pullUpEl.className = '';
  69. pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
  70. this.maxScrollY = pullUpOffset;
  71. }
  72. },
  73. onScrollEnd: function () {
  74. if (pullDownEl.className.match('flip')) {
  75. pullDownEl.className = 'loading';
  76. pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
  77. pullDownAction();    // Execute custom function (ajax call?)
  78. } else if (pullUpEl.className.match('flip')) {
  79. pullUpEl.className = 'loading';
  80. pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
  81. pullUpAction();    // Execute custom function (ajax call?)
  82. }
  83. }
  84. });
  85.  
  86. setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
  87. }

Since we live in the world of AJAX-driven websites that allow content to come and go, calling the refresh method is all you need to do for iScroll to reevaluate the scrollbar position and size:

  1. // When the AJAX is done, refresh the scrollbar sizing and positioning...
  2. scroller.refresh();

It's also important to point out that iScroll allows zooming and pinching, as well as snapping to elements:

  1. var myScroll = new iScroll('wrapper', {
  2. /* snap: true, */         // Would snap logically
  3. snap: "p",                // Snaps to each "P" tag
  4. momentum: false,
  5. hScrollbar: false,
  6. vScrollbar: false
  7. });

Lastly, iScroll-Lite is available for those looking to support only mobile browsers (iScroll allows for desktop support as well). The mischievous part of me would prefer iOS-style scrollbars instead of native browser scrollbars!

Possibly my favorite part of iScroll is that it's a standalone library; no external JavaScript library is required. iScroll has many configuration parameters so I encourage you to visit the iScroll page to check out everything you can do. Matteo Spinelli's iScroll is an outstanding piece of work; grab iScroll and start controlling your scrollbars today!

原文  http://davidwalsh.name/iphone-scrollbars

this is a demo .

  1. <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>上拉下拉动态加载例子</title>
    <link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css"/>
    <link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        $("#list").bind('pageinit', function () {    
             $.ajax({
                 type: "get",
                 async: false,
                 url: "http://www.57lehuo.com/index.php?a=index&m=api&method=itemsSearchGet&keyword=连衣裙&sign=5cb85c3eed22c1908e05c584813c8dd2",
                 dataType: "jsonp",
                 jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                 jsonpCallback:"itemsSearchGet",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
                 success: function(json){    
                     var content='';
                      $.each( json['result'], function(i, n){                          
                          var url=n.url!='undefined'?n.url:'';
                        var bimg=n.bimg!='undefined'?n.bimg:'';
                        var title=n.title!='undefined'?n.title:'';
                        content = content + "<li>";
                        content = content + "<a target=\"_blank\" href=\"http://s.click.taobao.com/t?e=zGU34CA7K%2BPkqB05%2Bm7rfGGjlY60oHcc7bkKOQiRddrNEyGLx31dnc6%2Fz%2BaQS2UNDUWpebTcEEjBuk1W5odmLS8%3D&pid=mm_30949159_0_0\">";
                        content = content + "<img src=\""+bimg+"_100x100.jpg\" />";
                        content = content + "<h2>";
                        content = content + "连衣裙";
                        content = content + "</h2>";
                        content = content + "<p>";
                        content = content + title;
                        content = content + "</p>";                
                        content = content + "</a>";
                        content = content + "</li>";
                    });                
                    $("#thelist").append(content).listview('refresh');        
                    
                 },
                 error: function(){
                     //alert('fail');
                 }
             });        
            
        });
        $("#list").bind("pagebeforeshow", function(){        
            setTimeout(loaded, 10); 
        });
        //http://www.57lehuo.com/index.php?a=index&m=api&method=itemsListGet&timestamp=12121512&cid=773&sign=8d6fda3f30ea3517341e1820cd719784
  2.  
  3. })
  4.  
  5. </script>
    <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/iscroll.js"></script>
  6.  
  7. <script type="text/javascript">
  8.  
  9. var myScroll,
        pullDownEl, pullDownOffset,
        pullUpEl, pullUpOffset,
        generatedCount = 0;
  10.  
  11. /**
     * 下拉刷新 （自定义实现此方法）
     * myScroll.refresh();        // 数据加载完成后，调用界面更新方法
     */
    var p=2;
    function pullDownAction () {
        
            $.ajax({
                 type: "get",
                 async: false,
                 url: "http://www.57lehuo.com/index.php?a=index&m=api&method=itemsSearchGet&keyword=连衣裙&p="+p+"",
                 dataType: "jsonp",
                 jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                 jsonpCallback:"itemsSearchGet",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
                 success: function(json){    
                     var content='';
                      $.each( json['result'], function(i, n){                          
                          var url=n.url!='undefined'?n.url:'';
                        var bimg=n.bimg!='undefined'?n.bimg:'';
                        var title=n.title!='undefined'?n.title:'';
                        content = content + "<li>";
                        content = content + "<a target=\"_blank\" href=\"http://s.click.taobao.com/t?e=zGU34CA7K%2BPkqB05%2Bm7rfGGjlY60oHcc7bkKOQiRddrNEyGLx31dnc6%2Fz%2BaQS2UNDUWpebTcEEjBuk1W5odmLS8%3D&pid=mm_30949159_0_0\">";
                        content = content + "<img src=\""+bimg+"_100x100.jpg\" />";
                        content = content + "<h2>";
                        content = content + "连衣裙";
                        content = content + "</h2>";
                        content = content + "<p>";
                        content = content + title;
                        content = content + "</p>";                
                        content = content + "</a>";
                        content = content + "</li>";
                    });                
                    $("#thelist").prepend(content).listview('refresh');
                    
                 },
                 error: function(){
                    // alert('fail');
                 }
             });        
            p++;    
            
            myScroll.refresh();        //数据加载完成后，调用界面更新方法   Remember to 
    }
  12.  
  13. /**
     * 滚动翻页 （自定义实现此方法）
     * myScroll.refresh();        // 数据加载完成后，调用界面更新方法
     */
    function pullUpAction () {
        setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
            /*        
            var el, li, i;
            el = document.getElementById('thelist');
  14.  
  15.         for (i=0; i<3; i++) {
                li = document.createElement('li');
                li.innerText = 'Generated row ' + (++generatedCount);
                el.appendChild(li, el.childNodes[0]);
            }
            */
            
            var content = "";
            for (var i=1;i<3;i++){
                content = content + "<li>";
                content = content + "<a href=\"#\">";
                content = content + "<img src=\"images/album-bb.jpg\" />";
                content = content + "<h2>";
                content = content + "下拉新增内容<br/>"+new Date();
                content = content + "</h2>";
                content = content + "<p>";
                content = content + "Broken Bells";
                content = content + "</p>";                
                content = content + "</a>";
                content = content + "</li>";
            }
            $("#thelist").append(content).listview('refresh');
  16.  
  17.         myScroll.refresh();        // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
    }
  18.  
  19. /**
     * 初始化iScroll控件
     */
    function loaded() {
        //清除所占的内存空间
        if(myScroll!=null){
            myScroll.destroy();
        }
  20.  
  21.     pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;
        pullUpEl = document.getElementById('pullUp');    
        pullUpOffset = pullUpEl.offsetHeight;
        
        myScroll = new iScroll('wrapper', {
            useTransition: true,    //默认为true
            //useTransition: false, 
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match('loading')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                } else if (pullUpEl.className.match('loading')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                }
            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                    this.minScrollY = -pullDownOffset;
                } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'flip';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
                    this.maxScrollY = this.maxScrollY;
                } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                    this.maxScrollY = pullUpOffset;
                }
            },
            onScrollEnd: function () {
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';                
                    pullDownAction();    // Execute custom function (ajax call?)
                } else if (pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'loading';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';                
                    pullUpAction();    // Execute custom function (ajax call?)
                }
            }
        });
        
        setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
    }
  22.  
  23. //初始化绑定iScroll控件 
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  24.  
  25. //document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false); 
    </script>
    <link rel="stylesheet" type="text/css" href="css/iscroll.css">
    </head>
    <body>
  26.  
  27. <div data-role="page" id="list"> 
    <div id="header"><a href="#">产品列表页</a></div>
    <div id="wrapper">
        <div id="scroller">
            <div id="pullDown">
                <span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
            </div>
            <ul data-role="listview" data-icon="false" id="thelist">            
                <li><a href="#">
                    <img src="data:images/album-p.jpg">
                    <h3> Amadeus Phoenix</h3>
                    <p>Phoenix</p></a>
                </li>
            </ul>        
            <div id="pullUp">
                <span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
            </div>
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" data-grid="a">
                <ul>
                    <li><a href="index.html" class="ui-btn-active" data-ajax="false">首页</a></li>
                        
                </ul>
            </div>
    </div>
    </div>
    </body>
    </html>

demo  下载

iPhone Scrollbars with iScroll的更多相关文章

  1. iScroll 4.2.5 中文API

    概况 资料来源 http://cubiq.org/iscroll-4 http://www.cnblogs.com/wanghun/archive/2012/10/17/2727416.html ht ...

  2. jquery——移动端滚动条插件iScroll.js

    官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...

  3. iScroll.js 用法参考 （share）

    分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了.如果你英文比较好的话,可以看看官网的资料 ...

  4. iScroll.js 用法参考

    本文原文链接:http://www.cnblogs.com/duanhuajian/archive/2013/04/08/3008323.html 概要 iScroll 4 这个版本完全重写了iScr ...

  5. 自己写的，然后配合zepto+iscroll的上拉加载

    /** * Created by jl on 2016/3/28. *///初始化绑定iScroll控件var actHtml="";var myScroll,    pullUp ...

  6. iScroll.js插件使用方法

    iScroll.js 用法参考 (share) 分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍 ...

  7. iscroll.js 手机上下滑动 加载更多

    html <!DOCTYPE html> <html> <head> <title>下拉上拉刷新页面代码</title> <meta ...

  8. iScroll示例，下拉刷新，上拉刷新

    iScroll示例,下拉刷新,上拉刷新 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  9. iScroll框架解析——Android 设备页面内 div（容器，非页面）overflow:scroll; 失效解决（转）

    移动平台的活,兼容问题超多,今儿又遇到一个.客户要求在弹出层容器内显示内容,但内容条数过多,容器显示滚动条.按说是So easy,容器设死宽.高,CSS加属性 overflow:scroll; -we ...

随机推荐

  1. 洛谷P1919 【模板】A*B Problem升级版（FFT）

    传送门 话说FFT该不会真的只能用来做这种板子吧…… 我们把两个数字的每一位都看作多项式的系数 然后这就是一个多项式乘法 上FFT就好了 然后去掉前导零 (然而连FFT的板子都背不来orz,而且空间又 ...

  2. [Xcode 实际操作]七、文件与数据-(23)UI Testing系统界面测试功能的使用

    目录:[Swift]Xcode实际操作 本文将演示UI Testing系统界面测试功能的使用. 如果项目中尚未引入界面测试功能,请点击项目属性面板->[General]面板左下角的[+]图标 - ...

  3. C 语言实例 - 连接字符串

    C 语言实例 - 连接字符串 C 语言实例 C 语言实例 使用 strcat() 连接两个字符串. 实例 #include <stdio.h> int main() { ], s2[], ...

  4. dream(2018.10.17)

    一句话题意:讲什么题意啊,见usaco2017feb silver的T1,一模一样,就是牛和鸡的读入顺序反过来了一下,数据范围大了10倍,卡掉了\(O(n^2)\)的算法. 数据范围: 对于 30%的 ...

  5. Python-7-字典方法

    clear 删除所有字典项 >>> d = {} >>> d['name'] = 'Gumby' >>> d['age'] = 42 >&g ...

  6. [题解]（折半搜索/高斯消元枚举自由元）BZOJ_1770_Lights

    状压,时间空间都不行,如果每次搜索一半就可以省下很多空间,用map记下每种状态的答案,最后再把两次的答案合并 然而正解是高斯消元解异或方程组,最后搜索自由元 #include<iostream& ...

  7. 大数加法 HDU 1002

    #include <iostream> #include <cstring> #include <string> #include <cstdio> # ...

  8. POJ-1181-食物链

    链接:https://vjudge.net/problem/POJ-1182 题意: 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1 ...

  9. Unity Shader入门精要学习笔记 - 第17章 Unity的表面着色器探秘

    转自 冯乐乐的<Unity Shader 入门精要> 2010年的Unity 3 中,Surface Shader 出现了. 表面着色器的一个例子. 我们先做如下准备工作. 1)新建一个场 ...

  10. lnmp.org + phpstorm + xdebug

    lnmp.org下载安装包安装之: lnmp是个集成安装包,就不用自己在配置lnmp环境 安装phpstorm,破解方法:注册服务器为http://idea.lanyus.com 就可以了 xdebu ...