<!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>
Tout comme ce morceau de code, la tête et la queue sont fixes et le contenu du milieu défile. Si la hauteur moyenne est de 100 % et que la tête et la queue sont fixes, les barres de défilement apparaîtront au niveau de la tête et de la queue, ce qui est le cas. pas autorisé (Hey). Donc, dans ce cas, avant de trouver -webkit-overflow-scrolling: touch;, le défilement iOS était très bloqué auparavant. Maintenant, après avoir utilisé cela, iOS n'a aucun problème, et la barre de défilement et d'autres choses vont bien. Ensuite, il y a un problème avec Android. Le défilement est un peu anormal, mais c'est toujours acceptable. Cependant, après une longue recherche, il n'y a pas beaucoup d'informations. faire défiler p dans Android 4.2, puis rapidement. Il a été annulé sans raison ni solution. En fait, cette question aurait dû être posée il y a un an. À cette époque, le projet de terminal mobile était serré, je l'ai donc directement résolu en fixant la tête et la queue, et la hauteur moyenne était de 100 %. de la reconstruction, et j'ai rencontré un problème avec la barre de défilement. Je viens de découvrir un autre changement. Il y a un an, mon téléphone Android n'avait pas de barres de défilement dans WeChat, QQ et Chrome. Maintenant, mon Nexus6p a des barres de défilement dans QQ et Chrome, mais il n'y a pas de barres de défilement dans WeChat (je ne sais pas si Google a mis à jour quelque chose. ), mais le projet principal est For WeChat. Je n'ai pas encore regardé d'autres téléphones Android. Ils devraient au moins avoir des barres de défilement sur WeChat. Y a-t-il donc une solution ? En plus de simuler des barres de défilement.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Utilisez des plug-ins de défilement tels que iscroll et better-scroll