移动端web开发中，滚动事件对象通常是window，但
###移动端web开发中，滚动事件对象通常是window，但在ios下，这一事件会引起绝对定位元素（顶部栏、底部栏）失效，即：当滚动到页面的上下边缘时，绝对定位元素会随touchmove事件发生偏移。
###解决ios下这一缺陷的关键在于将滚动事件对象改为某一元素，并做相应的逻辑处理，该框架使用简短的代码来改善此缺陷。
============
使用说明_____________________________________
| |
| #top |
| 固定在顶部 |
—————————————————————————————————————
| |
| |
| |
| |
| |
| #center |
| 滚动元素 |
| |
| |
| |
| |
| |
—————————————————————————————————————
| |
| #bottom |
| 固定在底部 |
—————————————————————————————————————
##iOSBounce.fix(id, otherIDs); ##参数说明： ##id: {string} 滚动元素id 如(center); ##otherIDs: {array} 固定元素id 如(top,bottom);
示例html结构：
<div id="top" class="top-bar">xxx</div>//固定在屏幕顶部
<div id="center" class="scroller">xxx</div>//滚动
<div id="bottom" class="bottom-bar">xxx</div>//固定在屏幕底部
css样式：
.top-bar {
position: fixed;
top: 0px;
height:35px;
width: 100%;
max-width: 800px;
margin: 0 auto;
border-bottom: 1px solid #E2E2E6;
line-height:35px;
background-color: #eee;
z-index: 10;
}
.scroller {
/*需要通过js对ios以及android做适配*/
width: 100%;
height: auto;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling : touch;
}
.bottom-bar {
position: fixed;
bottom: 0px;
left: 0px;
height: 44px;
width: 100%;
max-width: 800px;
margin: 0 auto;
color: #00a5e0;
line-height: 44px;
vertical-align: middle;
text-align: center;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e0e0e0));
z-index: 99;
}
js逻辑:
//对ios滚动元素做适配
if($.os.ios){
$('#center').css({'position': 'absolute', "top": "0", "bottom": "44px"});
iOSBounce.fix("center", ["top", "bottom"]);
} else {//android
$('#center').css({"padding-bottom": "44px"});
}
#期待大家提出宝贵建议
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
