communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > CSS 实现移动设备滚动回弹效果_html/css_WEB-ITnose

CSS 实现移动设备滚动回弹效果_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-21 08:56:57
original
3245 Les gens l'ont consulté

-webkit-overflow-scrolling 属性控制元素在移动设备上具有滚动回弹效果

Saferi 对于存在该属性的网页，会创建一个UIScrollView 提供子layer给渲染模块使用

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling

取值

auto 使用普通滚动，当手指从屏幕中移开时停止滚动

touch 使用具有回弹效果的滚动，滚动的速度与持续时间由滚动手势的强烈成正比

例子

HTML

<div class="wrapper">  <div class="scroller">    <!-- content -->  </div></div>
Copier après la connexion

CSS

.wrapper {  overflow: auto;  -webkit-overflow-scrolling: touch;}
Copier après la connexion

但是 IOS Saferi 在滑动的时候会出现讨厌的 “橡皮筋效果” (Over Scroll)

详情知乎

https://www.zhihu.com/question/22256539

注意及兼容性

硬件加速的系统级控件，所以效率很高但是这相对是耗更多内存的，最好在产生了非常大面积的overflow时才应用

iOS Safari 5.0 / Android 4.0 以上支持

Étiquettes associées：
CSS 实现移动设备滚动回弹效果
source：php.cn
Article précédent：HTML 5与HTML 4的区别_html/css_WEB-ITnose Article suivant：Nancy之Forms authentication的简单使用_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2173
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2325
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1957
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1835
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1885
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal