Partage
  • Partager sur Facebook
  • Partager sur Twitter

[HTML-CSS] jouer avec overflow: scroll

Sujet résolu
    30 juin 2024 à 22:51:49

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="style.css">
      <script type="module" src="../javascript/script.js"></script>
    </head>
    <body>
      <div class="animatext">
      </div>
      
       <div class="projects-carousel">
         <ol class="carousel__viewport">
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit temporibus voluptates rem perspiciatis quisquam repellat reprehenderit facilis tenetur voluptate ut dolor, nulla modi laboriosam aliquam earum rerum cum in inventore!
           </p>
         </ol>
       </div>
      
    
      <div class="navbar">
        <a href="">About me</a>
      </div>
    </body>
    </html>

    * {
      --padding: 10px;
      --text-color: rgb(0, 187, 0);
    }
    
    *::-webkit-scrollbar {
      scrollbar-color: transparent transparent;
      width: 0;
    }
    
    *::-webkit-scrollbar-track {
      background: transparent;
    }
    
    *::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }
    
    body {
      font-family: Consolas;
      color: var(--text-color);
      background-color: rgb(48, 48, 48);
      margin: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    
    .animatext {
      width: 100%;
      height: 10vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .projects-carousel {
      height: 80vh;
      width: 2000px;
      overflow-x: scroll;
    }
    
    .navbar {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
    
    a {
      text-decoration: none;
      color: var(--text-color);
    }
    
    @media screen and (max-width: 900px) {
      body {
        font-size: 18px;
      }
    
      .navbar {
        right: 20px;
        bottom: 20px;
      }
    }
    

    Bonjour, 

    Le contenu de projects-carousel (représenté grossièrement par le lorem-ipsum ci dessus) dépasse le body en largeur. Je ne veux pas que la page soit scrollable, par contre je souhaite que projects-carousel soit scrollable en largeur sans déplacer le reste des éléments de la page.

    Est-ce que ceci est possible de faire sans mettre les autres éléments en position: absolute sachant que les autres éléments seront responsifs?

    Lien du screenshot de mon projet -> Imgur: The magic of the Internet



    -
    Edité par AlexRz 30 juin 2024 à 22:54:56

    • Partager sur Facebook
    • Partager sur Twitter
      1 juillet 2024 à 10:07:39

      Bonjour,

      plusieurs petites remarques :

      • déclare tes propriétés personnalisées dans :root plutôt que *
      • *::-webkit-scrollbar : tu es sûr de vouloir cacher la scrollbar tout le temps partout plutôt que juste sur ton carrousel ? (tu risques de perdre en utilisabilité)

      Ta question : d'après mes tests, c'est .carousel__viewport qui devrait avoir une largeur, pas son parent avec l'overflow.

      -
      Edité par Lamecarlate 1 juillet 2024 à 10:07:50

      • Partager sur Facebook
      • Partager sur Twitter

      Pas d'aide concernant le code par MP, le forum est là pour ça :)

        1 juillet 2024 à 14:15:24

        Lamecarlate a écrit:

        Bonjour,

        plusieurs petites remarques :

        • déclare tes propriétés personnalisées dans :root plutôt que *
        • *::-webkit-scrollbar : tu es sûr de vouloir cacher la scrollbar tout le temps partout plutôt que juste sur ton carrousel ? (tu risques de perdre en utilisabilité)

        Ta question : d'après mes tests, c'est .carousel__viewport qui devrait avoir une largeur, pas son parent avec l'overflow.

        -

        Edité par Lamecarlate il y a environ 3 heures


        Yes, je suis sûr de vouloir cacher la scrollbar sur le body. Mon site est assez simple en terme de fonctionnalité, c'est un portfolio, je souhaite juste permettre à l'utilisateur de scroller en largeur sur les projets ! :)

        Merci pour ta réponse, et pour tes réponses en général, depuis 2-3 ans que je postes des questions sur ce forum, j'ai très souvent eu une réponse de ta part ! 

        • Partager sur Facebook
        • Partager sur Twitter
          1 juillet 2024 à 16:26:01

          Si tu ne permets que le scroll en largeur, je conseille vivement un brin de JS pour capturer ledit scroll, et faire qu'à la souris on défile automatiquement en largeur. Sinon ça risque d'être assez relou…

          Ma suggestion marche, je suppose, puisque tu as mis en résolu, parfait :)

          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :)

          [HTML-CSS] jouer avec overflow: scroll

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown