Heim > Web-Frontend > H5-Tutorial > Hauptteil

So lösen Sie das Problem der gleitenden Verzögerung auf mobilen Endgeräten in h5

王林
Freigeben: 2020-11-24 16:27:42
nach vorne
7218 Leute haben es durchsucht

So lösen Sie das Problem der gleitenden Verzögerung auf mobilen Endgeräten in h5

Die Lösung lautet wie folgt:

(Verwandte Video-Tutorials: HTML-Video-Tutorial)

1. Das Attribut -webkit-overflow-scrolling auf der iOS-Seite kann den Seitenscrolleffekt steuern wie folgt, um Trägheitsscrollen und elastische Effekte zu erzielen:

body{
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
overflow-y: scroll;
}
Nach dem Login kopieren

2. Verursacht durch die Box-Einstellungshöhe 100 %:

html,body{
height: 100%;
}
Nach dem Login kopieren

Löschen Sie einfach den obigen Code.


3.

Wenn beides immer noch nicht funktioniert, gibt es eine andere Lösung, nämlich die Verwendung der Bereichsschiebekomponente in der Mui-Komponente

<div class="mui-scroll-wrapper">
	<div class="mui-scroll">
		<!--这里放置真实显示的DOM内容-->
	</div>
</div>
<script>
mui(&#39;.mui-scroll-wrapper&#39;).scroll({
       scrollY: true, //是否竖向滚动
       scrollX: false, //是否横向滚动
       startX: 0, //初始化时滚动至x
       startY: 0, //初始化时滚动至y
       indicators: true, //是否显示滚动条
       deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
       bounce: true //是否启用回弹
});
</script>
Nach dem Login kopieren

Konfigurieren Sie den Wert im Scroll entsprechend Ihrer tatsächlichen Situation .

Hinweis: bounce: true muss true sein, wenn es in false geändert wird, kann die gesamte Seite nicht verschoben werden.

h5

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem der gleitenden Verzögerung auf mobilen Endgeräten in h5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!