<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<title></title>
<style>
* {
margin:0;
padding:0
}
header,footer {
width:100%;
height:80px;
background:lightblue;
}
.con {
height:calc(100vh - 160px);
overflow:scroll;
-webkit-overflow-scrolling: touch;
}
.list-box {
counter-reset: slideNum;
}
.list-box li {
list-style:none;
height:100px;
box-sizing:border-box;
border-bottom:5px solid #000;
background:pink;
}
.list-box li::before {
counter-increment: slideNum;
content: "[" counter(slideNum) "]";
}
</style>
</head>
<body>
<header></header>
<p class="con">
<ul class="list-box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
<footer></footer>
</body>
</html>
Just like this piece of code, the head and tail are fixed, and the middle content is scrolled. If the middle height is 100% and the head and tail are fixed, the scroll bar will appear at the head and tail, which is not allowed (hey). So in this case, before I found -webkit-overflow-scrolling: touch;, iOS scrolling was very stuck before. Now after using this, iOS has no problems, and the scroll bar and other things are fine. Then there is something wrong with Android. The scrolling is a little abnormal, but it is still acceptable. However, the scroll bar is gone. After searching for a long time, there is not a lot of information. One person said that Google supported scrolling in p in Android 4.2, and then quickly It was canceled with no reason and no solution. In fact, this question should have been asked a year ago. At that time, the mobile terminal project was tight, so I directly solved it by fixing the head and tail, and the middle height was 100%. Now I want to start over from the reconstruction, and I encountered a problem with the scroll bar. I just discovered another change. A year ago, my Android phone did not have scroll bars in WeChat, QQ, and chrome. Now my nexus6p has scroll bars in QQ and chrome, but WeChat has no scroll bars (I don’t know if Google has updated something), but the main project is For WeChat. I haven't looked at other Android phones yet. They should at least not have scroll bars on WeChat. So is there any solution? In addition to simulating scroll bars.
