Comment implémenter le défilement haut et bas en CSS

CSS pour obtenir un défilement de haut en bas

Dans la conception et le développement de sites Web, il est courant d'obtenir l'effet de défilement de haut en bas du texte. Ci-dessous, nous présentons une méthode basée sur CSS pour réaliser le défilement de haut en bas.

Étape 1 : Définir le conteneur

En HTML, nous devons d'abord définir un conteneur pour contenir le contenu qui doit défiler. Vous pouvez utiliser des div comme conteneurs ou autres éléments HTML.

Exemple de code :

<div class="scroll-container">
  <p>这是需要滚动的内容……</p>
  <p>这也是需要滚动的内容……</p>
  <p>这还是需要滚动的内容……</p>
</div>

Étape 2 : Définir le style

Nous utilisons CSS pour définir le style de base du conteneur, y compris la largeur, la hauteur, la bordure, etc. Dans le même temps, nous devons utiliser l'attribut overflow: Hidden pour masquer le contenu au-delà de la portée du conteneur afin que le contenu puisse défiler librement dans le conteneur. overflow: hidden属性隐藏超出容器范围的内容，使得内容能够在容器内自由滚动。

代码示例：

.scroll-container {
  width: 400px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
}

步骤三：实现滚动效果

在容器内，我们需要定义一个元素作为滚动的“窗口”，用于显示需要滚动的内容。我们可以使用定位方式，将这个滚动窗口放置在容器内部，并设置其初始位置。

为了实现滚动效果，我们需要使用CSS的animation属性，定义一个动画。在动画中，我们可以控制滚动窗口的位置，使其向上或向下移动，同时设置滚动的速度。

代码示例：

.scroll-container {
  position: relative;
}

.scroll-container p {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

在上面的示例中，我们将滚动窗口定义为scroll-container元素内的子元素p，并将其放置在scroll-container容器的左上角。接着，我们使用position: absolute将其与容器脱离文档流，并使用top: 0和left: 0将其放置在容器的最上面。

在animation属性中，我们使用scroll作为动画名称，并设置其持续时间为10秒，时间函数为linear，表示匀速运动。infinite表示动画持续无限次。接下来，我们在@keyframes scroll中定义动画的具体过程，其中transform: translateY(-100%)

Exemple de code :

<div class="scroll-container">
  <p>这是需要滚动的内容……</p>
  <p>这也是需要滚动的内容……</p>
  <p>这还是需要滚动的内容……</p>
</div>

Étape 3 : Implémenter l'effet de défilement

Dans le conteneur, nous devons définir un élément comme une "fenêtre" de défilement pour afficher le contenu qui doit défiler. Nous pouvons utiliser le positionnement pour placer cette fenêtre défilante à l'intérieur du conteneur et définir sa position initiale.

Afin d'obtenir l'effet de défilement, nous devons utiliser l'attribut animation de CSS pour définir une animation. Dans l'animation, nous pouvons contrôler la position de la fenêtre de défilement, la déplacer vers le haut ou vers le bas et définir la vitesse de défilement. 🎜🎜Exemple de code : 🎜rrreee🎜Dans l'exemple ci-dessus, nous définissons la fenêtre de défilement comme un élément enfant p à l'intérieur de l'élément scroll-container et la plaçons à l'intérieur du scroll-container code>scroll-containerLe coin supérieur gauche du conteneur. Ensuite, nous utilisons position : absolue pour le supprimer du flux de documents et utilisons top : 0 et left : 0 pour le placer à l'intérieur du conteneur. le haut de. 🎜🎜Dans l'attribut animation, nous utilisons scroll comme nom de l'animation, et définissons sa durée sur 10 secondes, et la fonction de temps sur linéaire , ce qui signifie Mouvement uniforme. infini signifie que l'animation continue indéfiniment. Ensuite, nous définissons le processus spécifique d'animation dans @keyframes scroll, où transform: translateY(-100%) signifie monter la hauteur de la fenêtre de défilement pour obtenir un effet de défilement. . 🎜🎜Étape 4 : Code complet🎜🎜Les étapes ci-dessus sont intégrées ensemble, et le code final complet est le suivant : 🎜rrreee🎜Ce qui précède sont les étapes et le code complet pour utiliser CSS pour réaliser un défilement vers le haut et vers le bas. Différents besoins peuvent être. rencontré en modifiant les styles du conteneur et de la fenêtre déroulante. 🎜

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!