WonderCSS

用iScroll解决手机浏览器position:fixed失效的问题

Solve the problem of position-fixed-lapse

最近出于工作原因要做几个针对移动端的二级域网站,在以往的响应式布局经验中,手机端的浏览器都不识别CSS中的 position:fixed; 定位的。这样如果打算坚持使用APP式的顶端工作条的话我们只能使用javascript,虽然 JS 会略微提高服务器压力但也足以弥补因 position:fixed; 失效而导致的页面效果。

在此类JS中 iscroll 框架可谓专门针对这个问题而诞生,iscroll不仅弥补了position:fixed;在移动端的缺陷,同时也在框架中加入了很多弹性效果及移动端手势。

在使用中除了引用 iscroll.js 外还需要以下必要代码:

JS部分:


function loaded() {
	document.addEventListener('touchmove', function(e){ e.preventDefault(); });
	myScroll = new iScroll('scroller');
}
document.addEventListener('DOMContentLoaded', loaded);

CSS代码部分:


#wrapper {
    position:relative;
    z-index:1;
}

HTML代码部分:


<!--iscroll框架部分 不可改-->
<div id="wrapper">
    <div id="scroller">
        <!--网站内容部分-->
    </div>
</div>

最后我们简单了解下 iScroll 参数:


hScroll: true, //是否水平滚动
vScroll: true, //是否垂直滚动
x: 0, //滚动水平初始位置
y: 0, //滚动垂直初始位置
bounce: true, //是否超过实际位置反弹
bounceLock: false, //当内容少于滚动是否可以反弹,这个实际用处不大
momentum: true, //动量效果,拖动惯性
lockDirection: true, //当水平滚动和垂直滚动同时生效时,当拖动开始是否锁定另一边的拖动
useTransform: true, //是否使用CSS形变
useTransition: false, //是否使用CSS变换
topOffset: 0, //已经滚动的基准值(一般情况用不到)
checkDOMChanges: false, //是否自动检测内容变化

By 于湛 发布于 2013.05.18 16,407 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注