Partagez votre expérience en utilisant webkit-overflow-scolling en CSS3-tutoriel CSS-php.cn

Partagez votre expérience en utilisant webkit-overflow-scolling en CSS3

yulia

Libérer： 2018-09-19 16:16:53

original

1870 Les gens l'ont consulté

Les barres de défilement sont souvent utilisées dans la mise en page. Cet article partagera avec vous mon expérience d'utilisation de -webkit-overflow-scolling pour éviter les pièges aux amis. Si vous en avez besoin, vous pouvez venir jeter un œil ici.

Nous savons tous que dans le navigateur iOS Safari et le navigateur principal de l'application, lorsque le contenu d'une page h5 dépasse la hauteur de l'écran et que nos doigts font glisser l'écran, dès que le geste quitte l'écran, le défilement se terminera immédiatement. À l'heure actuelle, nous pouvons définir -webkit-overflow-scrolling=touch pour que la page défile en douceur, mais cette configuration entraînera également de nombreux problèmes.

1. La définition de -webkit-overflow-scrolling touch sur le corps seul n'est pas valide. Elle doit être définie à la fois sur le HTML et le corps pour être efficace :

html,body{
    height: 100%;
    overflow: auto;
   -webkit-overflow-scrolling: touch;
}

Copier après la connexion

2. Conteneur parent Après avoir défini -webkit-overflow-scrolling=touch, les éléments enfants fixes ne sont pas autorisés à apparaître dans le sous-conteneur. Pourquoi dites-vous cela ? Parce que lorsque vous définissez -webkit-overflow-scrolling=touch, vous constaterez que l'attribut fixe n'est pas valide lorsque vous faites glisser l'écran, et il défile également avec l'écran. Cet élément ne sera fixé à la page que lorsque le défilement s'arrêtera. Ce n’est évidemment pas le résultat que nous souhaitons.

Ma solution ici n'est pas de définir -webkit-overflow-scrolling sur l'élément body, d'ajouter un autre conteneur div pour le définir là où le défilement est requis, puis de placer tous les conteneurs qui doivent être corrigés directement sur le corps à l’intérieur de l’élément.

3. La définition de l'attribut -webkit-overflow-scrolling sur un div seul n'est pas valide. Après les tests, j'ai découvert que je devais d'abord définir le conteneur parent div1 sur un conteneur avec une hauteur, puis définir la hauteur. conteneur enfant dépassé. Le code spécifique pour définir l'attribut -webkit-overflow-scrolling est le suivant :

<style>.div-p{ width: 100%; height: 500px;/*这是测试值，具体针对项目需求设置，不要超出子容器内容高度*/overflow: hidden;/*设不设定这个值对-webkit-overflow-scrolling没有影响*/}
.div-c{ width: 100%; height: 2000px; overflow: auto;/*测试发现一定要设定这个值才起作用*/ -webkit-overflow-scrolling: touch;}</style>
<div class="div-p">
<div class="div-c">我要滚动啊，，在ios要顺畅啊</div>
</div>

Copier après la connexion

Après des tests répétés, il a été constaté que les paramètres suivants peuvent également déclencher efficacement le -webkit-overflow. -attribut de défilement. Le code spécifique est le suivant :

<style>
.content-box{
  height: 500px;/*经过测试后发现只要设定的这个高度小于屏幕高度，-webkit-overflow-scrolling属性也能有效触发*/
  border: solid 1px green;
  overflow: auto;
  -webkit-overflow-scrolling: touch;}
</style>
<body>
<div class="content-box">哎呀我是要滚动的啊<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
有效果的哦。。。
</div>
</body>

Copier après la connexion

Bien sûr, la version ci-dessus doit changer sa hauteur lorsque le rendu HTML est terminé pour obtenir la même hauteur que l'écran, mais la maintenabilité de cette méthode est trop pauvre. Plus tard, une solution a été trouvée. Le code spécifique est le suivant :

<style>
.ios-scroll-father{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10rem ;
  height: 100%;}
.ios-scroll-child{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10rem ;
  overflow: auto;}
  -webkit-overflow-scrolling touch
</style>
<div class="ios-scroll-father">
<div class="ios-scroll-child">
我要完美解决ios的顺畅滑动问题啊，，，来试试咯。演示，请自己添加代码到超出屏幕内容哦~
</div>
</div>

Copier après la connexion

Ici, un rappel, lors de la définition de l'attribut -webkit-overflow-scrolling, soit ne définissez pas la hauteur. , ou la hauteur de height+padding ne doit pas dépasser la hauteur de l'écran, sinon vous constaterez que etc. Lorsque vous faites défiler vers le haut ou le bas, une partie sera coupée et vous devrez faire glisser votre doigt pour apparaître. . . C'est un piège. J'ai accidentellement réglé la hauteur et le remplissage à 100 % et j'ai découvert ce phénomène. Après avoir cherché partout, je n'ai pas pu trouver le problème, je n'ai donc pu que supprimer le code et le résoudre lentement.

4. Bien sûr, si ce ne sont que des problèmes, ce serait vraiment facile à résoudre. Cependant, un jour, j'ai écrit une liste et j'ai eu besoin de faire des effets de pagination défilante. événement de défilement de la barre de défilement. Il s'avère que scrollTop n'est pas mis à jour de temps en temps et que la valeur scrollTop ne peut pas être obtenue tant que la page n'arrête pas de défiler.

5. L'animation de transition ne sera pas exécutée lors du défilement de la page. C'est un énorme piège. Si vous avez une solution, merci de laisser un message et de me le faire savoir. . .

Ce qui précède sont les conclusions auxquelles nous sommes parvenus lors du développement du projet et qui ont été testées à plusieurs reprises sur la base des informations que nous avons trouvées. S'il y a quelque chose qui ne va pas, veuillez le signaler.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!