css cache la barre de défilement mais peut faire défiler

Avec le développement continu des applications Web, la conception Web devient de plus en plus interactive. En tant qu'élément interactif courant, les barres de défilement sont souvent utilisées. Mais parfois, nous souhaitons masquer la barre de défilement pour rendre la page plus simple et plus belle. Cet article explique comment utiliser CSS pour masquer la barre de défilement tout en pouvant faire défiler.

1. Utilisez l'attribut overflow de CSS

Nous pouvons utiliser l'attribut overflow de CSS pour contrôler le contenu de débordement de l'élément. L'attribut overflow a trois valeurs de paramètre : visible (valeur par défaut), caché, défilement et auto.

1. Hidden

Cette valeur d'attribut est utilisée pour masquer un élément et ses sous-éléments. Si le contenu est trop long, il sera immédiatement coupé et masqué en dehors de la zone.

2. scroll

Nous pouvons utiliser la valeur de l'attribut scroll pour créer une barre de défilement dans un élément. Lorsque le contenu est trop long pour tenir à l’écran d’un seul coup, les barres de défilement nous permettent de tout faire défiler.

L'utilisation du défilement peut obtenir l'effet "masquer la barre de défilement tout en faisant défiler". Nous pouvons définir une hauteur et une largeur fixes dans l'élément, laisser le contenu déborder et utiliser "overflow:scroll" pour afficher la barre de défilement.

3. auto

Enfin, nous avons une valeur d'attribut "auto". Cette valeur d'attribut spécifie que le navigateur doit automatiquement ajouter des barres de défilement lorsque cela est nécessaire, par exemple lorsque le contenu est trop volumineux. Lorsque le contenu ne dépasse pas le conteneur, aucune barre de défilement n'apparaîtra.

2. Masquer la barre de défilement

Par conséquent, nous pouvons utiliser "overflow:hidden" pour masquer la barre de défilement. Cela masquera nos barres de défilement et désactivera le défilement.

.Masquer la barre de défilement {
débordement : caché ;
}

Cependant, dans ce cas, nous ne pouvons pas faire défiler le contenu à travers la barre de défilement. Par conséquent, nous devons utiliser une autre méthode pour obtenir l’effet souhaité. Voici un exemple de base qui utilise "overflow:hidden" pour masquer la barre de défilement.

3. Il peut toujours défiler

La question suivante est de savoir comment rendre le contenu toujours défilable. Nous pouvons utiliser JavaScript pour résoudre ce problème. Nous devons détecter le type d'appareil utilisé par l'utilisateur puisque les barres de défilement sont visibles sur les appareils mobiles.

Une méthode est fournie ci-dessous qui nous permet de contrôler le comportement de la barre de défilement. Cela dépend de la bibliothèque jQuery.

$(document).ready(function(){
if(navigator.userAgent.indexOf('Mac OS X') != -1 || navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1){

$('body').css({
  'overflow-y': 'scroll',
  '-webkit-overflow-scrolling': 'touch'
});

} else {

$('body').css('overflow-y', 'scroll');

}
});

Ce code activera les normes lorsque nous naviguons sur la barre de défilement d'un PC ou d'un appareil Android. Sur les appareils Apple, il utilisera des barres de défilement similaires, mais émulera les barres de défilement iOS natives. Nous pouvons faire défiler le contenu en touchant la barre de défilement ou la page.

Bien sûr, ce n’est pas le seul moyen. Nous pouvons également obtenir des effets similaires grâce à CSS sans recourir à JavaScript. Nous pouvons définir la hauteur et la largeur de l'élément, masquer la barre de défilement en utilisant "overflow:hidden", puis activer le défilement inertiel en utilisant "-webkit-overflow-scrolling:touch".

Activer le défilement inertiel {
height: 100%;
width: 100%;
overflow: caché
-webkit-overflow-scrolling:
}

4. Conclusion

Dans cet article, nous avons appris comment pour masquer les barres de défilement à l'aide de CSS tout en pouvant faire défiler. Nous avons couvert deux façons d'obtenir cet effet en utilisant l'attribut overflow et JavaScript. Chaque méthode a ses propres avantages et inconvénients. La décision finale dépend de vos besoins. Si vous avez besoin d'une solution plus flexible et portable, utilisez JavaScript. Si vous avez juste besoin de masquer les barres de défilement tout en pouvant faire défiler, utilisez CSS.

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!