Maison > Article > interface Web > Comment obtenir un effet de défilement fluide avec CSS

Comment obtenir un effet de défilement fluide avec CSS

王林original: 2023-11-21 13:13:421202parcourir

Comment utiliser CSS pour obtenir un effet de défilement fluide

Dans la conception et le développement Web, l'effet de défilement est un effet très courant et intéressant qui peut apporter une meilleure expérience aux utilisateurs. Pour obtenir un effet de défilement fluide, vous pouvez y parvenir grâce à certaines techniques CSS. Cet article explique comment utiliser CSS pour obtenir un effet de défilement fluide et fournit des exemples de code spécifiques.

1. Utilisez des points d'ancrage pour obtenir un défilement fluide des pages internes

Le point d'ancrage est une marque en HTML Vous pouvez définir une certaine position sur la page comme point d'ancrage et la positionner via la valeur du point d'ancrage dans l'URL. En défilement fluide, vous pouvez faire défiler en douceur jusqu'à la position d'ancrage correspondante lorsque vous cliquez sur un lien de navigation.

Exemple de code HTML :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>平滑滚动示例</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    /* 导航样式 */
    nav {
      background-color: #f5f5f5;
      padding: 20px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
    }

    nav ul li {
      margin: 0 10px;
    }

    nav ul li a {
      color: #333;
      text-decoration: none;
      padding: 10px;
    }

    /* 内容样式 */
    #home {
      height: 100vh;
      background-color: #f9f9f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    #about {
      height: 100vh;
      background-color: #eaeaea;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    #contact {
      height: 100vh;
      background-color: #d9d9d9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>
  </nav>

  <section id="home">
    <h1>欢迎来到首页</h1>
    <p>这是一个平滑滚动示例</p>
  </section>

  <section id="about">
    <h1>关于我们</h1>
    <p>这是关于我们的内容</p>
  </section>

  <section id="contact">
    <h1>联系我们</h1>
    <p>这是联系我们的内容</p>
  </section>
</body>
</html>

Dans le code ci-dessus, en ajoutant une valeur d'ancrage au lien de navigation, telle que <a href="#home">Homepage</a>, lorsque vous cliquez dessus Lors de la navigation sur un lien, la page défilera en douceur jusqu'à l'emplacement d'ancrage correspondant. En effet, le comportement par défaut du navigateur pour les liens d'ancrage consiste à faire défiler en douceur jusqu'à l'emplacement d'ancrage. <a href="#home">首页</a>，当点击导航链接时，页面将平滑滚动到对应的锚点位置。这是因为浏览器对锚链接的默认行为是平滑滚动到锚点位置。

二、使用CSS的滚动行为属性

CSS的滚动行为属性（scroll-behavior）是CSS滚动模块中的一项新特性，能够控制滚动时的行为方式。通过设置该属性为smooth

2. Utilisez l'attribut de comportement de défilement de CSS

L'attribut de comportement de défilement (scroll-behavior) de CSS est une nouvelle fonctionnalité du module de défilement CSS, qui peut contrôler le comportement de défilement. En définissant cette propriété sur smooth, vous pouvez obtenir un effet de transition fluide lorsque la page défile.

Exemple de code CSS :

html {
  scroll-behavior: smooth;
}

Le code ci-dessus sera appliqué à l'ensemble du document, rendant le comportement de défilement fluide dans tout le document. Cependant, il convient de noter que cet attribut ne prend effet que dans les navigateurs prenant en charge cette fonctionnalité. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, le comportement de défilement est toujours le comportement par défaut.

3. Utilisez l'attribut transform pour obtenir un défilement fluide

En plus d'utiliser des points d'ancrage et des attributs de comportement de défilement, nous pouvons également utiliser l'attribut CSS transform pour obtenir un effet de défilement fluide. En utilisant la fonction translationY de l'attribut transform, nous pouvons obtenir un défilement fluide dans la direction verticale.

Exemples de code HTML et CSS :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>平滑滚动示例</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    /* 导航样式 */
    nav {
      background-color: #f5f5f5;
      padding: 20px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
    }

    nav ul li {
      margin: 0 10px;
    }

    nav ul li a {
      color: #333;
      text-decoration: none;
      padding: 10px;
    }

    /* 内容样式 */
    .container {
      height: 100vh;
      overflow-y: scroll;
      scroll-behavior: smooth;
    }

    .section {
      height: 100vh;
      background-color: #f9f9f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>
  </nav>

  <div class="container">
    <div id="home" class="section">
      <h1>欢迎来到首页</h1>
      <p>这是一个平滑滚动示例</p>
    </div>

    <div id="about" class="section">
      <h1>关于我们</h1>
      <p>这是关于我们的内容</p>
    </div>

    <div id="contact" class="section">
      <h1>联系我们</h1>
      <p>这是联系我们的内容</p>
    </div>
  </div>

  <script>
    var links = document.querySelectorAll('nav ul li a');
    var sections = document.querySelectorAll('.section');

    links.forEach(function(link) {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        var href = this.getAttribute('href');
        var offsetTop = document.querySelector(href).offsetTop;

        scroll({
          top: offsetTop,
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>
</html>

Dans le code ci-dessus, nous avons ajouté un événement click au lien de navigation, en obtenant la valeur de l'attribut href du lien cliqué, en obtenant la valeur offsetTop de l'élément d'ancrage correspondant et en transmettant ceci valeur pour faire défiler la fonction pour obtenir un effet de défilement fluide.

4. Résumé🎜🎜Cet article présente trois méthodes d'utilisation de CSS pour obtenir des effets de défilement fluides, à savoir l'utilisation de points d'ancrage, d'attributs de comportement de défilement et d'attributs de transformation. En utilisant rationnellement ces méthodes, vous pouvez ajouter des effets de défilement élégants et fluides aux pages Web et améliorer l'expérience utilisateur. L'utilisation de ces méthodes nécessite une sélection basée sur les besoins réels et des considérations de compatibilité, ainsi que l'ajout de code JS pertinent de manière appropriée pour implémenter la fonctionnalité. J'espère que le contenu de cet article pourra vous être utile. 🎜

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!

css html 值传递 JS 事件 href transform

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser CSS pour obtenir un effet de rotation d'imageArticle suivant：Comment utiliser CSS pour obtenir un effet de rotation d'image

Articles Liés

Voir plus