Quelques méthodes et pratiques pour implémenter l'absence de barres de défilement en CSS

Dans le développement front-end, les barres de défilement sont un élément très courant. Dans les pages Web que nous voyons habituellement, les barres de défilement apparaissent sur presque toutes les pages. Mais dans certains cas, on peut rencontrer des pages sans barres de défilement, ce qui n'est pas un bug mais un choix de conception. Dans cet article, nous explorerons quelques méthodes et pratiques d'implémentation de l'absence de barres de défilement en CSS.

1. Masquer les barres de défilement

Le moyen le plus courant consiste à masquer les barres de défilement via CSS. CSS fournit de nombreuses propriétés pour contrôler le style de la barre de défilement. Nous pouvons utiliser certaines nouvelles propriétés de CSS3 pour obtenir cet effet. En prenant le navigateur Webkit comme exemple, nous pouvons faire ceci :

body::-webkit-scrollbar { display: none; }

Cela peut masquer toute la barre de défilement, mais cela peut ne pas fonctionner dans d'autres navigateurs. Si vous devez utiliser cette méthode dans plusieurs navigateurs, vous pouvez ajouter le code suivant :

html { overflow: -moz-scrollbars-none; }
html {-ms-overflow-style: none;}
html { overflow: -webkit-scrollbar; }
html::-webkit-scrollbar { display: none; }

2. Barre de défilement superposée

Parfois, nous devons conserver la barre de défilement, mais la styliser pour qu'elle se fonde dans la page, pour obtenir un effet plus naturel. . Cela nécessite certaines compétences.

Tout d'abord, nous devons définir un conteneur et le limiter à une taille fixe :

.container {
  width: 100%;
  height: 500px;
  overflow: auto;
}

Ensuite, nous définirons deux éléments enfants à l'intérieur du conteneur, l'un pour être le conteneur réel du contenu et l'autre pour agir comme une barre de défilement. :

<div class="container">
  <div class="content"></div>
  <div class="scrollbar"></div>
</div>

Ensuite, nous devons placer la barre de défilement dans la bonne position. Implémenté via le positionnement CSS.

.scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  background-color: #d3d3d3;
  opacity: 0;
  transition: opacity 0.2s;
}

Ensuite, vous devez ajouter un écouteur d'événement de molette de la souris au conteneur et mettre à jour la position de la barre de défilement.

$('.container').bind('scroll', function() {
  updateScrollbar();
})

function updateScrollbar() {
  var scrollRatio = $('.container').scrollTop() / ($('.content').height() - $('.container').height());
  var topPosition = scrollRatio * ($('.container').height() - $('.scrollbar').height());
  $('.scrollbar').css('top', topPosition);
}

3. Ne pas utiliser les barres de défilement

En plus de faire disparaître ou intégrer les barres de défilement, nous pouvons également utiliser d'autres méthodes, comme le changement de page ou les effets de retournement.

Effet de changement de page :

Placez un contenu masqué sur un panneau fixe et utilisez l'animation CSS pour le faire glisser dans la zone visible lorsque le point de défilement est atteint.

.panel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.hiddenContent {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100%;
  overflow: auto;
  padding-right: 17px;
  box-sizing: content-box;
  transition: transform 0.5s ease-in-out;
}

.panel.active .hiddenContent {
  transform: translateY(-100%);
}

Effet Flip :

Laissez le contenu pivoter dans un espace tridimensionnel en ajoutant un conteneur et en utilisant la propriété perspective.

.container {
  height: 100%;
  perspective: 1000px;
}

.content {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.content.inverted {
  transform: rotateX(180deg);
}

$('.container').on('scroll', function() {
  if ($('.container').scrollTop() >= $('.content').height() / 2) {
    $('.content').addClass('inverted');
  } else {
    $('.content').removeClass('inverted');
  }
})

Résumé :

Dans cet article, nous avons examiné les moyens d'éviter les barres de défilement en CSS et avons utilisé certaines pratiques pour appliquer ces méthodes. Quelle que soit la méthode que vous utilisez, il existe un compromis entre simplicité visuelle et expérience utilisateur, et choisissez ce qui vous convient le mieux en fonction de votre conception.

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!