除此而外在此之前版本的iScroll的性状以外,而你也不也许跟你COO说ios4怎么不相称那贰个属性啊

间接折磨position:fixed在ios和android的使用,而实质上这么上流的ios4种类竟然不帮衬position:fixed,幸运的是苹果集团在ios5系统修复了这些bug,相比优秀的消除方案是让具有客商把系统升级到ios5及以上版本,这种主见在海外幸好,在境内情状下,因为越狱而不想去晋级手提式有线电话机的人居多,若是强迫顾客去进步,那恐怕会把您的制品KS了。而你也不容许跟你总老总说ios4怎么不相称这一个属性啊,让顾客升高啊!老董看来的是结果,你做不出去,旁人如何是好得出去吗,那样你老董恐怕会对你的力量感觉难以置信,也许感到你并不专门的学业……那其实回到头来大家依旧宝宝去做好合作,要么就找到完美的缓和方案,什么人让可爱的顾客和相亲的业主是上帝吧,于是,大家陷入为苦逼的程序猿~

http://www.cnblogs.com/asqq/archive/2012/04/23/2466132.html

ios3.2~4.3不帮助position:fixed截图如下,测量检验地点:http://caniuse.com/#search=position%3Afixed

http://www.nb88.net/Index/p/id/406

公海赌船网址 1

http://cubiq.org/iscroll-4

明天的例子在这里了,如下图大家能够看出,想在四哥伦比亚大学中落实如下的布局:顶上部分铁青导航平素稳固在荧屏上能够视区域,低部米白导航始终平昔在显示屏下方可视区域,中间灰色区域模块始终稳定,模块内容赶上海洋蓝区域时可从前后拖动,如下图:

公海赌船网址,概要

iScroll 4
那么些本子完全重写了iScroll这些框架的原始代码。这几个类型的发生完全部都以因为舒适型webkit浏览器(诸如中兴,华为平板,Android
那么些体系上遍布使用)
提供了一种本地化的章程来对三个范围了中度和幅度的因素的内容实行滑动。很不幸的是,这种状态下有所的web应用的页面就不可能富含具备position:absolute的头、页尾可能是叁个剧情可滚动的
高级中学档区域。
可是,Android系统最新修订版已经得以协助这种效果了(尽管帮忙的力度还不是特意好),Apple集团仿佛不太情愿将one-finger滑动事件采用到div成分上。
除开在此以前版本的iScroll的天性以外,iScroll 4还包含如下的特色:
     (1)缩放(Pinch/Zoom)
    (2)推动刷新(Pull up/down to refresh)
    (3)速度和属性提高
    (4)准确捕捉成分
    (5)自定义滚动条
      友情提示:iScroll 4实际不是iScroll
3的轻巧代替版本,API文书档案已经不雷同了。同一时候考虑到此版本正处在测验期,一些API大概会有微小的变型。

使用指南

在此文书档案中您会发觉众多事例来教会你哪些连忙上手iScroll脚本库。参看文中的demo小例子并紧凑翻阅此文书档案,也可能有一点小无聊,可是那篇文章中却是iScroll这么些脚本库的经典之所在哦。
iScroll须求对所要进行滚动的因素进行起先化,何况不限制一个页面中采取iScroll的要素的个数(这里不思量您的硬件配置)。滚动成分中情节的体系和长度在一定水准中校会影响iScroll脚本Curry
能够同期利用的成分的个数。
行使iScroll那一个脚本库时,DOM树的构造要丰裕轻巧,移除不供给的标签,尽量防止过多的价签嵌套使用。 最优的应用iScroll的组织如下所示:

<div id="wrapper">
        <ul>
               <li></li>
               .....
        </ul>
</div>

在那一个小例子中,ul标签将会被滚动。iScroll一定要与滚动内容外面包车型客车wrapper进行联络才会时有产生效率。
**
【注意事项】:** 唯有wrapper里的第4个子元素才得以滚动,假设您想要更加多的要素得以滚动,那么你能够试行下边的这种写法:

<div id="wrapper">
        <div id="scroller">
               <ul>
                    <li></li>
                     ...
                </ul>
                <ul>
                     <li></li>
                     ...
                </ul>
       </div>
</div>

在那一个事例中,scroller这几个因素得以滚动,纵然它含有几个ul成分

iScroll必需在调用在此之前实例化,你能够在下边两种景况下对iScroll实行实例化:

(1)使用onDOMContentLoaded事件落成滚动

 

适用于滚动内容只含有文字、图片,并且具备的图样都有牢固的尺码 

<script src="iscroll.js"></script>
        <script>
                var myscroll;
                function loaded(){
                           myscroll=new iScroll("wrapper");
                 }
               window.addEventListener("DOMContentLoaded",loaded,false);
         </script>

注意:myscroll这些变量是大局的,由此你能够在其余地方调用它

(2)使用onLoad事件完结滚动

因为DOMContentLoaded事件是载入DOM结构后就能够被调用,所以在图纸等要素未载入前可能不可能显著滚动区域的长度宽度,此时能够利用onLoad事件来实现。

<script src="iscroll.js"><script>
        <script>
                    var myscroll;
                    function loaded(){
                   setTimeout(function(){
                            myscroll=new iScroll("wrapper");
                     },100 );
                }
                window.addEventListener("load",loaded,false);
         </script>

这种气象下iScroll会在页面财富(包含图片)加载完成100ms之后收获开始化,那应该是一种相比安全的调用iScroll的艺术。

(3)inline初始化

这种场地会在页面加载到js的时候就开展调用,此措施不推荐使用,不过十分的多javascript的大腕都在用这种措施,笔者又有哪些理由不赞成呢?

<script src="iscroll.js"></script>
                    <div id="wrapper">
                            <ul>
                                <li></li>
                                 ...
                          </ul>
                  </div>
        <script>
                   var myscroll=new iScroll("wrapper");
        </script>

但是提议你采用部分框架的ready方法来安全调用iScroll(比方jquery里的ready())。

 iScroll里传递的参数

iScroll里的第一个参数允许你自定义一些剧情,譬喻下边包车型客车这段代码:   

<script>
          var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
       </script>

第三个参数常常都是二个指标,像上边的这些事例里就设定了不出示滚动条。常用的参数如下:

     hScroll                 false 禁止横向滚动 true横向滚动
默以为true
               vScroll                 false 精致垂直滚动 true垂直滚动
默感到true
               hScrollbar            false遮蔽水平方向上的滚动条
               vScrollbar            false 隐蔽垂直方向上的滚动条
               fixedScrollbar    
 在iOS系统上,当成分拖动超出了scroller的界线时,滚动条会缩短,设置为true能够禁止滚动条高出
                                       
scroller的可知区域。默许在Android上为true, iOS上为false
               fadeScrollbar     false 内定在无渐隐效果时隐敝滚动条
               hideScrollbar     在尚未客户交互时掩饰滚动条
默感觉true
               bounce             启用或剥夺边界的反弹,默以为true
               momentum      
启用或剥夺惯性,默以为true,此参数在你想要保存财富的时候特别有效
               lockDirection       false打消拖动方向的锁定,
true拖动只可以在一个主旋律上(up/down 只怕left/right)

公海赌船网址 2

种种功能的贯彻

用固定定位的议程:position:fixed

滚动刷新  ‘Pull to refresh’ demo

自打Instagram和部分Apple的本地化应用出现了那些职能之后,那一个功用就变得相当流行。你能够看看那儿先一睹为快。
       最新版中,小编把把”pull to
refresh”这几个片段单分出来作为iScroll的八个额外插件。你能够点击那儿看看pull
to
refresh是什么样工作滴。你只必要做的正是自定义pullDownAction()那几个艺术。你恐怕必要一个ajax来加载新的剧情,不过只要DOM树产生了变通要记得调用refresh这几个方法来。要求牢记的是在例子中我们加了1秒的延期来效仿互连网的延期效果。当然,即便您不想选用这几个延迟,那就把setTimeout方法去掉就行了。

缩放(pinch / zoom)  ‘Pull to refresh’
demo

我们只可以面前遇到一个事实,这就是光有滚动其实没什么创新意识的。那正是干吗在iScroll
4那一个版本里大家允许你能够放
大和降低。想要那么些意义,只必要设寄放大的参数zoom
为true就能够完成选取手势来加大和紧缩。你能够看看那儿。
双击放大和压缩的功力在iScroll
4里也是获得帮衬的。要采纳缩放作用,你足足需求如下配置:         

var myScroll =new iScroll("wrapper",{zoom:true});

假设你想对缩放功用拓宽深度的自定义的话能够行使下边包车型大巴一对增选:
               zoomMax   钦定允许放大的最大倍数,默感觉4
     
【注意事项】:假设想要图片缩放的效劳很好的话要把她们松手硬件的合成层中。通俗点说,正是在颇具须要缩放的img成分上接纳-webkit-transform:translate3d(0,0,0)来促成,何况越是主要的是,硬件的加快会占领大批量能源,要稳重运用,不然你的运用或许就此崩溃。

捕捉元素(snap and snap to element)  ‘Carousel’
demo

SNAP效率是剖断成分是或不是滑动到内定地方。通过这一个成效能够制作花哨的跑马灯效果。

插件会自行深入分析滚动区域内一律标签或同等大小的因素做为捕捉对象,也能够透过参数钦定捕捉的指标

var myscroll=new iScroll("wrapper",{
                       snap:true,
                       momentum:false,
                       hScrollbar:false,
                       vScrollbar: false
                  });

可以透过安装snap参数为钦赐标签来设定捕捉对象。举例捕捉li标签。          

var myscroll=new iScroll("wrapper",{
                      snap:"li",
                      momentum:false,
                      hScrollbar:false,
                      vScrollbar:false
                });

在那么些事例中scroller能够捕捉到滚动区域中最左上角的li成分 

自定义滚动条(custom scrollbars)

在iScroll
4那个本子中,能够应用一多元的css来自定义滚动条的呈现。能够给滚动条增添二个class参数,如下:
                 

var myscroll=new iScroll("wrapper",{
  scrollbarClass: "myScrollbar"
});

 供给提示的是,滚动条是由三个要素组合而成的:容器和显示器。容器同wrapper的冲天一致,而显示器则象征的是滚动条本身。
           滚动条的HTML结构如下: 

<div class="myScrollbarV">
                          <div></div>
                  </div>
                 .myscrollbarV{
                           position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;
                  }
                .myScrollbarV > div {
                           position:absolute;
                           z-index:100;
                           width:100%;
                             /* The following is probably what you want to customize */
                           background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
                           border:1px solid #800;
                          -webkit-background-clip:padding-box;
                          -webkit-box-sizing:border-box;
                          -webkit-border-radius:4px;
                          -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
                 }

通用方法:

*     (1)refresh                         
在DOM树发生变化时,应该调用此办法*

      eg: setTimeout(function () { myScroll.refresh(); }, 0); 

*     (2)*iScroll还提供了scrollTo,
scrollToElement和scrollToPage多个章程让您可见因而javascript来调控滚动效应。**

    scrollTo(x, y, time,
relative)
:在钦点的time时间内让内容滚动条x/y的岗位。如myScroll.scrollTo(0,
-100, 200) 在200阿秒内Y轴向下滚动100像素。 myScroll.scrollTo(0, 10,
200, true)能够兑现相对当前地点在200纳秒内Y轴向上滚动10像素的效劳。

    scrollToElement(element,
time)
:在内定的时日内滚动到钦命的因素。如myScroll.scrollToElement(‘li:nth-child(10)’,
100)
在100微秒内滚动到第11个li成分的任务。第四个参数可以用CSS3中的选拔器来筛选元素。

    snapToPage(pageX, pageY,
time)
:在200飞秒内从第1页滚动到第2页(0代表第1页,1象征第2页)。这些动用SNAP效用的时候能够调用这一个函数。

     (3)detroy()                      
完全解除myscroll及其占用的内部存款和储蓄器空间
                eg: myscroll.destroy();

*        myScroll = null;*

HTML:

iScroll的升华趋势

  • 表单域的支撑
  • 缩放的优化
  • 更加好的桌面浏览器的包容性
  • onScrol事件的优化
  • 加个哈希值的浮动
  • DOM改造后自动刷新

 

<header class="head">顶部固定区域</header>

<article class="main">
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
......
</article>

<footer class="foot">底部固定区域</footer>

CSS:

.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}
.head{top:0;}
.foot{bottom:0;}
.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;}

测验地点:http://jsbin.com/aceyub/2,在二弟大中应用webkit内核的浏览器张开,不奇怪展现效果如下:

公海赌船网址 3

而在ios4种类中,当拖动莲红区域内容时,底层红色固定区域被挤到可视荧屏外

公海赌船网址 4

虽说本人是写前端CSS方向,但神跡驾驭js的对团结的付出功能提高和与js的通力同盟中是有一点都不小帮忙的,一贯折磨position:fixed在ios和android的使用,还写了css的万分方案,这一次尝试用强硬的iScroll.js。

iScroll

安静版本:iScroll4.js – 2011.07.14 – V4.2

新颖版本:iScroll5.js – 二零一一.06.03 – V5 beta 1

文件大小:34K(YUI压缩后26K,不用太顾忌iScroll4体量大的主题材料)

系统包容性: iphone/itouch> = 3.1.1,GALAXY Tab> = 3.2,Android> =
1.6,火狐,Opera桌面/手提式有线电话机桌面包车型大巴Webkit

法定简述

iScroll 4
那些本子完全重写了iScroll这么些框架的原始代码。这一个项目标发出完全都以因为中配版webkit浏览器(诸如iPhone,GALAXY Tab,Android那些系统上常见应用)提供了一种本地化的措施来对三个范围了莫斯中国科学技术大学学和宽度的成分的原委进行滑动。很糟糕的是,这种场馆下具备的web应用的页面就不能包涵具有position:absolute的头、页尾或然是一个剧情可滚动的中等区域。

可是,Android系统最新修订版已经能够补助这种效应了(就算补助的力度还不是极其好),Apple集团就像是不太情愿将one-finger滑动事件选择到div成分上。

除开在此以前版本的iScroll的特色以外,iScroll 4还富含如下的风味:

  • 缩放(Pinch/Zoom)
  • 拉动刷新(Pull up/down to
    refresh)
  • 进程和属性进步
  • 标准捕捉成分
  • 自定义滚动条

 友情提醒:iScroll 4并非iScroll
3的简便代替版本,API文书档案已经不相同样了。同期思虑到此版本正处在测验期,一些API或许会有细微的浮动。

法定使用指南

在此文档中你会意识许多事例来教会你什么飞快上手iScroll脚本库。参看文中的demo小例子并紧凑阅读此文档,也是有一些小无聊,不过那篇小说中却是iScroll那几个脚本库的优异之所在哦。

iScroll必要对所要进行滚动的因素举行初始化,而且不限制三个页面中采纳iScroll的要素的个数(这里不思量您的硬件配置)。滚动成分中内容的品种和长度在一定水平少校会潜濡默化iScroll脚本Curry能够何况采取的要素的个数。

利用iScroll这一个脚本库时,DOM树的布局要丰富轻易,移除不须求的价签,尽量制止过多的价签嵌套使用。

最优的接纳iScroll的布局如下所示:

<div id="wrapper">
        <ul>
               <li></li>

               .....
        </ul>
</div>

在那几个小例子中,ul标签将会被滚动。iScroll绝对要与滚动内容外面包车型地铁wrapper实行联系才会爆发效果。

【注意事项】:

唯有wrapper里的首先个子成分才足以滚动,若是你想要越多的要素得以滚动,那么您能够试试上面包车型地铁这种写法:

<div id="wrapper">
        <div id="scroller">
               <ul>
                    <li></li>
                     ...
                </ul>
                <ul>
                     <li></li>
                      ...
                </ul>
       </div>
</div>

在那些例子中,scroller那些成分得以滚动,尽管它包涵五个ul成分

iScroll必得在调用之前实例化,你能够在上面三种情状下对iScroll实行实例化:

  • onDOMContentLoaded
  • onLoad
  • 以内联inline方式

上面大家一一来说讲那三种用法的利弊
ONDOMContentLoaded
适用于滚动内容只含有文字、图片,况兼有着的图纸都有定位的尺码
动用情势:(在head标签中增加如下代码)

<script src="iscroll.js"></script>
<script>
var myscroll;
function loaded(){
myscroll=new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>

留神:myscroll这一个变量是全局的,由此你能够在别的地方调用它的函数
onLoad
多少时候在DOMContentLoaded的情景下就开始化iScroll其实是有一些草率的,由此此时页面的资源大概还未有任何加载
得了。如果您遇见了一些很奇怪的一举一动能够施行上面包车型客车写法:

<script src="iscroll.js"><script>
<script>
var myscroll;
function loaded(){
setTimeout(function(){
myscroll=new iScroll("wrapper");
},100 );
}
window.addEventListener("load",loaded,false);
</script>

这种景色下iScroll会在页面财富(包含图形)加载达成100ms之后获得开头化,那应当是一种比较安全的调用iScroll的艺术。
inline初始化
这种气象会在页面加载到js的时候就开展调用,此格局不引入应用,不过相当的多javascript的大腕都在用这种措施

<script src="iscroll.js"></script>
<div id="wrapper">
<ul>
<li></li>
...
</ul>
</div>
<script>
var myscroll=new iScroll("wrapper");
</script>

只是提议您利用一些框架的ready方法来安全调用iScroll(比方jquery里的ready())

上述一点iScroll4.js简述和用法,来至百度全面包车型大巴翻译,iScroll4.js还会有众多选取的点子如水平拉动、定义滚动条等,详细可查阅ISCROLL4
简述
,官方地址:http://cubiq.org/iscroll-4

那么,对于作者的难题,使用轻巧的ONDOMContentLoaded兑现,暗中同意正是竖直拖动,代码如下:

 HTML:

<header class="head">顶部固定区域</header>

<article class="main" id="wrapper">  这里id为wrapper iscroll里面定义好的 -->
<div><!--  可滚动区域 -->
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
......
</div>
</article>

<footer class="foot">底部固定区域</footer>

css:

:root ,body{height:100%;}/* 定义页面内容为一屏展现 这2个标签都必须设置高度100%  */
body{display:-webkit-box;display:box;-webkit-box-orient:vertical;}/* 定义页面为弹性盒子模型 内容垂直布局  */
.head,.foot{height:38px;line-height:38px;width:100%;background-color:#99CC00;}
.main{width:100%;background-color:#BABABA;-webkit-box-flex:1;box-flex:1;overflow:hidden;}/* 定义该模块的高度自动适应 占据页面(除头部和顶部)剩下的高度  */

javascript:

<script type="text/javascript" src="iscroll.js"></script>
 <script>
     var myscroll;
    function loaded(){
               myscroll=new iScroll("wrapper");
     }
   window.addEventListener("DOMContentLoaded",loaded,false);
</script>

那正是健全的减轻方案啦,测量试验地方:http://jsbin.com/aceyub/7,帮忙ios4和android系统等,把这一个地点丢入你的手提式有线话机尝试看吗!

iScroll.js对webapp开荒以来是十分有应用价值,感激CUBIQ.ORG,而iScroll5.js曾经开始测验,期待下三个强劲的本子~

相关文章