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

最近出于工作原因要做几个针对移动端的二级域网站，在以往的响应式布局经验中，手机端的浏览器都不识别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, //是否自动检测内容变化

时间： 2024-09-20 08:07:04

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

css解决IE6、Chrome、ff 浏览器position:fixed;和闪动问题

 代码如下 复制代码 html{ _background:url(about:blank); /* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */ } /* 你的图层 */ .positionFixedLayer{ position:fixed; _position: absolute; _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeigh

如何解决手机浏览器页面点击不跳转浏览器双击放大网页_AngularJS

 手机端web网页项目 1,angluar js 1.4.6 网页项目开发过程中,使用PC浏览器能正常访问,IOS设备浏览器也能正常访问,但是使用Android部分浏览器进行访问的时候,链接偶尔不跳转,点击完没有任何反应(本人使用angluar js route进行单页面应用跳转),此时地址栏的路径已经被更新为点击后的地址,并且双击页面网页会放大(顺着这个现象去找到了问题) 现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大? 解决方案: 可以在页面头部加上meta

js完美解决IE6不支持position:fixed的bug

  关于IE6,虽然它已被微软抛弃很久了,但是由于大天朝的特殊行情(盗版)对于前端工程师来说,解决IE6兼容position:fixed的问题显得很重要.特别是你需要用到头尾悬停调用的时候 先来看段代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ

IE7下当position:fixed遇到text-align:center

啥也不说,先看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IE7下当posit

不受控制的 position:fixed

大家都知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用.它的作用是: position:fixed 的元素将相对于屏幕视口(viewport)的位置来指定其位置.并且元素的位置在屏幕滚动时不会改变. 但是,在许多特定的场合,指定了 position:fixed 的元素却无法相对于屏幕视口进行定位.这是为何呢?   失效的 position:fixed 在许多情况下,position:fixed 将会失效.MDN 用一句话概括了这种情况: 当元素祖先的

安卓手机浏览器安装文件占用空间与实际有别

飞象网讯(魏德龄/文)本次飞象手机针对Android平台上手机浏览器的手机占用空间展开评测.最终测试结果显示,Skyfire在安装文件大小和安装后占用空间上都最为用户节约空间,而OperaMobile在本次测试中表现欠佳. 测试平台:Android 2.3.7 测试机型:Desire HD 测评浏览器:QQ浏览器.360浏览器.UCWEBV8.OperaMobile.Skyfire.海豚浏览器. 经飞象手机测试,单就安装文件大小来看Skyfire浏览器的安装文件最为小巧,仅为1.6MB,而最大的

易观报告分析称手机浏览器个性化信息服务成趋势

中介交易 SEO诊断 淘宝客 云主机 技术大厅 近日,EnfoDesk易观智库发布了<2013年中国第三方手机浏览器用户调研报告>,对浏览器用户行为及未来发展趋势进行了调研分析.报告称,2013年手机浏览器用户使用习惯呈现出明显的碎片化.娱乐化等特性,满足不同场景下的即时信息需求,为用户提供个性化信息服务已成为未来手机浏览器的重要发展趋势之一. 报告数据显示,2013年手机浏览器活跃用户已突破4.2亿人次,月均使用时长达9.6亿小时,用户规模持续增长.同时手机浏览器月打开次数上高达95亿次,人

手机浏览器图片自适应高度问题解决办法

最近做PC站点的手机版,发现一个问题,图片在手机浏览器中显示效果有问题,宽度可以自动适应了,但是高度无法自动使用,调整css也没用,后来使用PHP正则替换的方式解决了手机浏览器图片自适应高度的问题. 一般情况下,解决手机浏览器自适应宽度和高度的方式是使用如下css即可: .content img{   max-width:100%;   height:auto; } 但是网页中图片的img标签是这样的: <img alt="湖北省第25届摄影艺术展" src="h/20

《2013年中国第三方手机浏览器用户调研报告》

近日,EnfoDesk易观智库发布了<2013年中国第三方手机浏览器用户调研报告>,对浏览器用户行为及未来发展趋势进行了调研分析.报告称,2013年手机浏览器用户使用习惯呈现出明显的碎片化.娱乐化等特性,满足不同场景下的即时信息需求,为用户提供个性化信息服务已成为未来手机浏览器的重要发展趋势之一. 报告数据显示,2013年手机浏览器活跃用户已突破4.2亿人次,月均使用时长达9.6亿小时,用户规模持续增长.同时手机浏览器月打开次数上高达95亿次,人均每次使用时长仅为6分钟,呈明显碎片化态势.用户