禁止IOS H5的滑动回弹
·
我们在开发h5页面时不知道大家发现这个问题没,在水果机上,页面会有弹性,有时候我们滑动中间部分时,有时候header、footer部分会跟着动(在此之前疯狂百度过很多方法都没解决,水群的时候也看到很多人也遇到过这个问题,今天无意中发现一个库能解决这个问题)
想禁止这个行为只要引入一个库就可以了
github地址
<script src="./inobounce.js"></script>
因为这个库是禁止了整个页面的滑动,我们需要在滚动的盒子外面加上height or max-height, overflow: auto , -webkit-overflow-scrolling: touch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./inobounce.js"></script>
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#app{
display: flex;
flex-direction: column;
height: 100vh;
flex-wrap: nowrap;
}
.header{
height: 50px;
width: 100%;
background: red;
}
.footer{
height: 50px;
width: 100%;
background: gray;
}
.content {
flex: 1;
display: block;
overflow-y: auto;
margin-bottom: 4px;
-webkit-overflow-scrolling: touch;
background: #f1f1f1;
}
li{
list-style: none;
width: 100%;
height: 40px;
}
li:nth-of-type(2n){
background: #f1f1f1;
}
li:nth-of-type(2n + 1){
background: white;
}
</style>
<body>
<div id="app">
<div class="header">
</div>
<div class="content">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
更多推荐
已为社区贡献1条内容
所有评论(0)