除外之前版本的iScroll的风味以外,而你也不容许跟你老董说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浏览器(诸如Nokia,GALAXY Tab,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脚本库里
可以同时利用的因素的个数。
运用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进行实例化:

(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

自打推特和局部Apple的本地化应用出现了那个功能之后,那些职能就变得万分流行。你可以看看那儿先一睹为快。
       最新版中,小编把把”pull to
refresh”这些部分单分出来作为iScroll的一个附加插件。你可以点击那儿看看pull
to
refresh是怎么工作滴。你只要求做的就是自定义pullDownAction()这一个点子。你也许必要一个ajax来加载新的情节,但是假若DOM树暴发了转变要记得调用refresh那些艺术来。要求牢记的是在例子中我们加了1秒的推迟来效仿网络的推迟效果。当然,假设您不想利用这么些延迟,那就把set提姆(Tim)eout方法去掉就行了。

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

俺们只能够面对一个事实,那就是光有滚动其实没什么创意的。那就是为啥在iScroll
4那些版本里我们允许你可以放
公海赌船网址,大和减少。想要这么些职能,只须要安装放大的参数zoom
为true即可落成选取手势来加大和缩短。你可以看看这儿。
双击放大和减弱的成效在iScroll
4里也是获取襄助的。要动用缩放成效,你足足须要如下配置:         

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

一经你想对缩放功用举办深度的自定义的话可以选用下边的一些挑选:
               zoom马克斯(Max)   指定允许放大的最大倍数,默许为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微秒内滚动到第10个li元素的义务。第1个参数可以用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 – 2012.07.14 – V4.2

新式版本:iScroll5.js – 2013.06.03 – V5 beta 1

文件大小:34K(YUI压缩后26K,不用太担心iScroll4体积大的题材)

系统包容性: iphone/itouch> = 3.1.1,三星平板> = 3.2,Android> =
1.6,火狐,Opera桌面/手机桌面的Webkit

合法简述

iScroll 4
那几个本子完全重写了iScroll那个框架的原始代码。那一个类其他暴发完全是因为豪华型webkit浏览器(诸如黑莓,surface,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脚本库里可以同时选用的元素的个数。

采纳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曾经早先测试,期待下一个强劲的本子~

相关文章