Comment obtenir un effet de défilement en CSS

CSS implémente des effets de défilement

Les effets de défilement sont généralement utilisés pour diverses interactions, animations et navigation dans la conception de pages de sites Web. La plupart des effets de défilement de sites Web conventionnels peuvent être obtenus via HTML+CSS. Cet article en présentera brièvement plusieurs.

1. Utilisez les attributs de débordement et de position

L'attribut de débordement du contenu encapsulé par une balise HTML (comme div) est scroll, puis utilisez l'attribut position pour déterminer la position de la zone de contenu afin d'obtenir l'effet de défilement. Le code est le suivant :

<div style="width:400px; height:200px; overflow:scroll; position:relative">
   <div style="width:600px; height:600px; position:absolute; top:0; left:0"> <!-- 内容区域 -->
     <!-- 内容部分 -->
   </div>
</div>

2. Utilisez l'attribut transform

Utilisez le translationY ou le translateX de l'attribut transform pour obtenir l'effet de défilement et faire défiler le contenu par déplacement. Le code est le suivant :

.container{
   width:400px;
   height:200px;
   overflow:hidden;
}
.content{
   width:600px;
   height:600px;
   transform: translateY(0);
   transition: transform 0.2s ease-out;
}

La partie du code JS est la suivante :

let content = document.querySelector('.content');
let offsetY = 0; //内容向上偏移的距离
setInterval(() => {
   content.style.transform = `translateY(-${offsetY}px)`;
   offsetY += 1;
}, 50);

3. Utilisation de l'animation CSS

L'animation CSS peut faire de l'effet de défilement un effet interactif simple et fluide. Le code est le suivant :

.container{
   width:400px;
   height:200px;
   overflow:hidden;
}
.content{
   width:600px;
   height:600px;
   animation: scroll 5s linear infinite;
}
 @keyframes scroll {
   0% {
     transform: translateY(0);
   }
   100% {
     transform: translateY(-400px);
   }
}

4. Utiliser la surveillance des événements de roue

En écoutant les événements de roue et en modifiant la valeur scrollTop ou scrollLeft de l'élément, vous pouvez obtenir un effet de défilement manuel. Le code est le suivant :

<div style="width:400px; height:200px; overflow:scroll">
  <div style="width:600px; height:600px"> <!-- 内容区域 -->
    <!-- 内容部分 -->
  </div>
</div>

La partie du code JS est la suivante :

let content = document.querySelector('.content');
let step = 100; //每次滚动的距离
document.querySelector('.container').addEventListener('wheel', function(event){
   event.preventDefault();
   content.scrollTop += event.deltaY > 0 ? step : -step;
});

Résumé

Voici plusieurs méthodes CSS courantes pour obtenir des effets de défilement. Lorsque vous les utilisez, choisissez la méthode la plus appropriée en fonction des besoins spécifiques. L'implémentation utilisant CSS peut non seulement simplifier le code, mais également rendre la page Web plus fluide et dynamique, et également faciliter l'expérience utilisateur, la gestion des composants et le débogage.

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!