iphone 微信浏览器上拽拽异常、失效问题(直接贴代码)_移动开发

您所在的位置：程序员俱乐部 > 编程开发 > 移动开发 > iphone 微信浏览器上拽拽异常、失效问题(直接贴代码)

iphone 微信浏览器上拽拽异常、失效问题(直接贴代码)

2017/12/7 16:42:38 凡事无绝对! 程序员俱乐部我要评论(0)

摘要：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>fixed解决方案</title><scriptsrc="../jsDemo/jquery-1.8.2.min.js?3393"></script><style>*{margin:0;padding:0;}html{width:100%;background
标签：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 class="other">其他</div>
<div class="container2" id="container2">
<div>
<div class="item">项目0</div>
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>
<div class="item">项目5</div>
<div class="item">项目6</div>
<div class="item">项目7</div>
<div class="item">项目8</div>
<div class="item">项目9</div>
</div>
</div>
<div class="button">按钮</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>

上一篇：各种机器学习的应用场景分别是什么？下一篇：京东苏宁加入保险战团各路豪杰争战科技新蓝海