js禁止苹果页面底部滚动_H5开发－－部分iphone手机无法滚动解决方案，iscroll使用方法...

最近在H5开发中遇到一个诡异的问题，其实很简单一个事情，做了一个弹窗，弹窗中的内容很长，需要滚动查看，正常设置一下overflow:scroll就好了，可以偏偏有的苹果就是就是不好用，折腾了一下午，记录一下，以便帮到需要的人。

网上找到2个解决方案

添加css属性

添加-webkit-overflow-scrolling: touch.msglistbody{

overflow-y: scroll;

-webkit-overflow-scrolling: touch;

}

或者采用js方式添加$("#PostList").css({

"overflow-y": "auto",

"-webkit-overflow-scrolling": "touch"

});

很遗憾，这么弄我的问题并没有解决，最后多方查找决定用iscroll.js来解决

iscroll.js使用方法

html结构

其中wrapper为滚动的外部框，ul及其子元素是要滚动的内容

• ...
• ...

...

css样式

外部框wrapper必须添加两个属性，position为relative或者absolute；overflow为hidden，设置好要滚动的区域大小#wrapper{

width: 200px;

height: 200px;

position: relative;

overflow: hidden;

}

ul{

width: 100%;

}

官方一个demo的html结构及样式

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html {

-ms-touch-action: none;

}

body,ul,li {

padding: 0;

margin: 0;

border: 0;

}

body {

font-size: 12px;

font-family: ubuntu, helvetica, arial;

overflow: hidden; /* this is important to prevent the whole page to bounce */

}

#wrapper {

position: absolute;

z-index: 1;

top: 45px;

bottom: 48px;

left: 0;

width: 100%;

background: #ccc;

overflow: hidden;

}

#scroller {

position: absolute;

z-index: 1;

-webkit-tap-highlight-color: rgba(0,0,0,0);

width: 100%;

-webkit-transform: translateZ(0);

-moz-transform: translateZ(0);

-ms-transform: translateZ(0);

-o-transform: translateZ(0);

transform: translateZ(0);

-webkit-touch-callout: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

-webkit-text-size-adjust: none;

-moz-text-size-adjust: none;

-ms-text-size-adjust: none;

-o-text-size-adjust: none;

text-size-adjust: none;

}

#scroller ul {

list-style: none;

padding: 0;

margin: 0;

width: 100%;

text-align: left;

}

#scroller li {

padding: 0 10px;

height: 40px;

line-height: 40px;

border-bottom: 1px solid #ccc;

border-top: 1px solid #fff;

background-color: #fafafa;

font-size: 14px;

}

• Pretty row 1
• Pretty row 2
• Pretty row 3
• Pretty row 4
• Pretty row 5
• Pretty row 6
• Pretty row 7
• Pretty row 8
• Pretty row 9
• Pretty row 10
• Pretty row 11
• Pretty row 12
• Pretty row 13
• Pretty row 14
• Pretty row 15
• Pretty row 16
• Pretty row 17
• Pretty row 18
• Pretty row 19
• Pretty row 20
• Pretty row 21
• Pretty row 22
• Pretty row 23
• Pretty row 24
• Pretty row 25
• Pretty row 26
• Pretty row 27
• Pretty row 28
• Pretty row 29
• Pretty row 30
• Pretty row 31
• Pretty row 32
• Pretty row 33
• Pretty row 34
• Pretty row 35
• Pretty row 36
• Pretty row 37
• Pretty row 38
• Pretty row 39
• Pretty row 40
• Pretty row 41
• Pretty row 42
• Pretty row 43
• Pretty row 44
• Pretty row 45
• Pretty row 46
• Pretty row 47
• Pretty row 48
• Pretty row 49
• Pretty row 50

调用方式

在body的onload事件或者jquery的ready事件中调用

var myScroll;

function loaded() {

myScroll = new IScroll('#wrapper');

}

......

//通过id方式创建对象

var myScroll = new IScroll('#wrapper');

//也可以这样

var wrapper = document.getElementById('wrapper');

var myScroll = new IScroll(wrapper);

//通过classname只能将第一个classname元素创建成对象，如果要创建多个需要自己循环创建

var myScroll = new IScroll('.wrapper');

如果创建成功，则会给滚动部分添加如下样式，当鼠标拖动时可以看translate属性在变化

iscroll还有很多功能，参见官网或github