Pourquoi mes barres de défilement n'apparaissent-elles pas sur le site Web de mon iPad ?

Problème d'affichage de la barre de défilement iOS avec débordement CSS

Dans le but d'activer les barres de défilement dans un élément div sur un site Web iPad à l'aide de CSS, le débordement la propriété est apparemment inefficace même si elle fonctionne correctement dans les navigateurs de bureau. Plus précisément, les propriétés suivantes ont été testées sans succès :

overflow: auto;
overflow: scroll;

Explication du problème

Les appareils iOS ont choisi d'éviter l'implémentation de barres de défilement visibles, en donnant la priorité à l'espace d'écran pour affichage du contenu. En conséquence, les utilisateurs sont censés utiliser la fonction de défilement à deux doigts pour naviguer dans le contenu débordant.

Solution

Défilement de débordement WebKit :

À partir d'iOS 5beta, la propriété -webkit-overflow-scrolling: touch peut être exploitée pour déclencher le comportement de la barre de défilement souhaité.

JavaScript et jQTouch :

Alternativement, il est possible de créer des barres de défilement personnalisées pour les éléments débordés à l'aide de JavaScript, potentiellement en conjonction avec jQTouch.

Requêtes multimédias :

Pour garantir une expérience transparente à travers appareils, les requêtes @media peuvent être utilisées pour supprimer le débordement sur les appareils iOS, permettant ainsi au contenu de s'afficher sans avoir besoin de barres de défilement.

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />

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!