你的位置:首页 > 操作系统

[操作系统]iphone 微信浏览器上拽拽异常、失效问题(直接贴代码)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fixed解决方案</title>
<script src="../jsDemo/jquery-1.8.2.min.js?3393"></script>
<style>
* {
margin: 0;
padding: 0;
}

html {
width: 100%;
background-color: plum;
}

body {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.other {
position: fixed;
width: 100%;
height: 5rem;
line-height: 5rem;
text-align: center;
background-color: orangered;
z-index: 10000;
}

.container2 {
width: 100%;
height: 100%;
margin-top: 5rem;
margin-bottom: 3rem;
box-sizing: border-box;
background-color: greenyellow;
}

.container2 .item {
height: 4rem;
line-height: 4rem;
text-align: center;
border-bottom: solid 2px gray;
}

.button {
position: fixed;
bottom: 0;
width: 100%;
height: 3rem;
line-height: 3rem;
text-align: center;
background-color: #00b3ee;
}
</style>

</head>
<body>
<div >其 他</div>
<div id="container2">
<div>
<div >项目0</div>
<div >项目1</div>
<div >项目2</div>
<div >项目3</div>
<div >项目4</div>
<div >项目5</div>
<div >项目6</div>
<div >项目7</div>
<div >项目8</div>
<div >项目9</div>
</div>
</div>
<div >按 钮</div>
<script src="http://momo-project.b0.upaiyun.com/Assets/IOS_FIXED/iscroll-infinite.js"></script>
</body>
</html>
<script type="text/javascript">
function resetFontSize() {
if (navigator.userAgent.indexOf('Mobile') !== -1) {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 1440 * 100 + 'px';
} else {
document.documentElement.style.fontSize = document.documentElement.clientHeight / 1440 * 50 + 'px';
}
}

window.addEventListener('resize', resetFontSize, false);
resetFontSize();

var $container2 = document.querySelector('.container2');
var $other = document.querySelector('.other');
var $button = document.querySelector('.button');
$container2.style.height = (document.documentElement.clientHeight - $other.clientHeight - $button.clientHeight) + 'px';
var myScroll = new IScroll('#container2', {
mouseWheel: true,
scrollbars: true
});
</script>