<!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>
Genau wie bei diesem Code sind Kopf und Ende festgelegt und der mittlere Inhalt wird gescrollt. Wenn die mittlere Höhe 100 % beträgt und Kopf und Ende festgelegt sind, werden die Bildlaufleisten am Kopf und am Ende angezeigt nicht erlaubt (Hey). Bevor ich also -webkit-overflow-scrolling: touch; gefunden habe, blieb das Scrollen unter iOS sehr hängen. Jetzt, nachdem ich dies verwendet habe, hat iOS keine Probleme mehr und die Bildlaufleiste und andere Dinge sind in Ordnung. Dann stimmt etwas mit dem Scrollen nicht, aber es ist immer noch akzeptabel. Nach langer Suche gibt es jedoch nicht viele Informationen Scrollen in p in Android 4.2 und dann schnell Es wurde ohne Grund und ohne Lösung abgebrochen. Eigentlich hätte diese Frage schon vor einem Jahr gestellt werden sollen. Damals war das Projekt des mobilen Terminals knapp, also habe ich es direkt gelöst, indem ich den Kopf und den Schwanz repariert habe, und die mittlere Höhe war 100 % aus der Rekonstruktion, und ich bin auf ein Problem mit der Bildlaufleiste gestoßen. Ich habe gerade eine weitere Änderung entdeckt. Vor einem Jahr hatte mein Android-Telefon keine Bildlaufleisten in WeChat, QQ und Chrome. Jetzt hat mein Nexus 6p Bildlaufleisten in QQ und Chrome, aber es gibt keine Bildlaufleisten in WeChat (ich weiß nicht, ob Google etwas aktualisiert hat ), aber das Hauptprojekt ist For WeChat. Ich habe mir noch keine anderen Android-Telefone angesehen. Sie sollten zumindest Bildlaufleisten auf WeChat haben. Zusätzlich zur Simulation von Bildlaufleisten.
用iscroll、better-scroll等滚动插件