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

时间：2013-12-25 编辑：简简单单来源：一聚教程网

最近出于工作原因要做几个针对移动端的二级域网站，在以往的响应式布局经验中，手机端的浏览器都不识别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 参数：

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, //是否自动检测内容变化

上一个： DEDECMS v5.7防止注册机的恶意注册和发贴
下一个： javascript根据userAgent字符串判断浏览器及版本

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程