Partage
  • Partager sur Facebook
  • Partager sur Twitter

Désactiver le scrolling horizontal

Sujet résolu
    29 juin 2020 à 16:37:33

    Bonjour,

    J'ai cherchais mais à chaque fois on me sortait des overflow-x: hidden; etc... ce n'est pas ce que je veux.

    Je souhaiterais avoir une chose du genre:

    #div{
        position: fixed;
    }

    mais qui ne fixe pas le scrolling verticale.

    Connaissez-vous une chose qui ferait cela ?

    Merci

    • Partager sur Facebook
    • Partager sur Twitter

    Dans mon monde, chaque lettre tapée est un sentiment ressenti.

      29 juin 2020 à 16:44:55

      Bonjour,

      je ne suis pas sûr d'avoir bien compris ta demande.

      Et comme tu as pu être conseillé ailleurs le overflow-x: hidden semble adapté à ton besoin.

      Par contre, l'idéal serait peut-être qu'il n'y ai pas de scrolling horizontal en faisant une interface responsive...

      As-tu un exemple de code pour que l'on puisse t'orienter?

      • Partager sur Facebook
      • Partager sur Twitter
        29 juin 2020 à 17:13:55

        J'ai un script test:

        Testez et vous comprendrez peut-être ce que j'essaye d'avoir

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>Test</title>
        <style>
            body{
                margin: unset;
                width: 3840px;
                height: 710px;
                display: flex;
            }
            .z{
                width: 1270px;
                height: 700px;
                display: flex;
            }
            
            #a{
                border: 5px solid blue;
            }
            #b{
                border: 5px solid orange;
            }
            #c{
                border: 5px solid pink;
            }
            #all{
                bottom: 0;
                width: 1270px;
                height: 100px;
                border: 5px solid black;
                position: fixed;
                display: flex;
                justify-content: space-between;
            }
            .tall{
                display: flex;
            }
            #a1{
                margin-left: 400px;
            }
            #a2{
                
            }
            #a3{
                margin-right: 400px;
            }
        </style>
        </head>
        <body>
        <div id="all">
            <a id="a1" class="tall" href="#a">1</a>
            <a id="a2" class="tall" href="#b">2</a>
            <a id="a3" class="tall" href="#c">3</a>
        </div>
        
        <div id="a" class="z">
        
        </div>
        <div id="b" class="z">
        
        </div>
        <div id="c" class="z">
        
        </div>
        
        </body>
        </html>

        En fait, chaque div est une page.

        C'est dans pages dans une seule page.

        Du coup, ce serait bête de scroller horizontalement... puisqu'il y a des liens en #...

        • Partager sur Facebook
        • Partager sur Twitter

        Dans mon monde, chaque lettre tapée est un sentiment ressenti.

          29 juin 2020 à 18:02:21

          Salut, 

          J'avoue ne pas tout comprendre à ce que tu essaies de faire... Tu essaies d'obtenir une disposition en colonne plutôt qu'en ligne ? Dans ce cas essaie de changer la flex direction ? 

          flex direction: column;

          Si ce n'est pas ça que tu essaies de faire, je n'ai pas compris ton problème. 

          • Partager sur Facebook
          • Partager sur Twitter
            29 juin 2020 à 18:11:50

            euh non..

            testez le code. ( mon ecran a une resolution horizontale de 1280px donc ajustez le à votre résolution )

            Ensuite, au lieu de scroller horizontalement, utilisez les liens.

            ( faites comme s'il n'y avait pas 3 pages( div ) mais qu'en utilisant les liens, une page etait appelé via ajax ).

            voila. Moi je veux faire en sorte qu'il n'y ait pas de possibilité de scroller horizontalement. ( tout en gardant le concept des liens #. )

            • Partager sur Facebook
            • Partager sur Twitter

            Dans mon monde, chaque lettre tapée est un sentiment ressenti.

              Staff 29 juin 2020 à 18:30:55

              Bonjour,

              est-ce que tu cherches à faire une "single page application", par hasard ? Si oui, lis ceci : https://www.smashingmagazine.com/2015/12/reimagining-single-page-applications-progressive-enhancement/ .

              • Partager sur Facebook
              • Partager sur Twitter

              Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

                29 juin 2020 à 19:10:16

                Exactement !

                J'ai pas beaucoup compris l'article que tu m'as partagé étant donné qu'il soit en anglais.. mais suis allé voir quelques autres articles sur le single page application...

                Ca n'a pas l'air simple en tout cas...

                • Partager sur Facebook
                • Partager sur Twitter

                Dans mon monde, chaque lettre tapée est un sentiment ressenti.

                  30 juin 2020 à 10:13:28

                  Bonjour,

                  voila ce que j'ai "bidouillé" en full CSS.

                  L'ordre des éléments est volontairement inversé afin de pouvoir sélectionner la première page par défaut.

                  HTML:

                  <div class="pages">
                    <div id="a">
                      <h1>Voici la 3e page</h1>
                    </div>
                    <div id="b">
                      <h1>Voici la 2e page</h1>
                    </div>
                    <div id="c">
                      <h1>Voici la 1ère page</h1>
                    </div>
                  </div>
                  
                  <ul>
                    <li><a href="#c">1</a></li>
                    <li><a href="#b">2</a></li>
                    <li><a href="#a">3</a></li>
                  </ul>

                  CSS:

                  html {
                    box-sizing: border-box;
                  }
                  
                  *, *:before, *:after {
                    box-sizing: inherit;
                  }
                  
                  body {
                    margin: 0;
                  }
                  
                  html,
                  body,
                  .pages {
                    height: 100%;
                  }
                  
                  .pages > div {
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 100%;
                    padding: 50px;
                    transition: opacity .2s ease-in-out;
                  }
                  
                  .pages > div,
                  .pages > div:target ~ div {
                    position: absolute;
                    opacity: 0;
                  }
                  
                  .pages > div:target,
                  .pages > div:last-child {
                    position: static;
                    opacity: 1;
                  }
                  
                  #a {
                    background-color: #fffff5;
                  }
                  
                  #b {
                    background-color: #ffda8e;
                  }
                  
                  #c {
                    background-color: #80d4f6;
                  }
                  
                  ul {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    padding: 0;
                    text-align: center;
                  }
                  
                  ul li {
                    display: inline-block;
                  }

                  -
                  Edité par -RR- 30 juin 2020 à 10:15:07

                  • Partager sur Facebook
                  • Partager sur Twitter
                    30 juin 2020 à 11:55:48

                    Juste un mot: magnifique !

                    Je sais pas comment t'as fait ça...

                    Y'a même le retour en arrière alors que ce n'est qu'une seule page ! T'es trop fort ! 

                    Coté css il va falloir que je me mette à comprendre le fonctionnement ! C'est un chef-oeuvre ! ( j'abuse pas du tout )

                    Bon, merci bien du temps que tu m'as accordé pour ce problème !

                    Bonne journée !

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Dans mon monde, chaque lettre tapée est un sentiment ressenti.

                      Staff 30 juin 2020 à 12:19:35

                      C'est justement ce qui était présenté dans l'article que j'avais mis en lien ;)

                      • Partager sur Facebook
                      • Partager sur Twitter

                      Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

                        30 juin 2020 à 12:43:08

                        @Lamecarlate: en effet, honte à moi. J'ai regardé furtivement le lien mais en effet c'est la même approche...

                        Bref go sur le lien en fait.

                        • Partager sur Facebook
                        • Partager sur Twitter
                          30 juin 2020 à 13:27:55

                          Ah oui effectivement lol, dsl moi et l'anglais c'est la galère... bah du coup je vais essayé de comprendre le fonctionnement sur ton lien lamecarlate.
                          • Partager sur Facebook
                          • Partager sur Twitter

                          Dans mon monde, chaque lettre tapée est un sentiment ressenti.

                            Staff 30 juin 2020 à 13:37:58

                            Mais ya pas de honte à avoir :o ! Je précisais simplement que c'était le même fonctionnement (et je pensais même que tu t'en étais inspiré, -RR-, ce qui est au fond le but de cet article)

                            Courage, CentreDordi, l'anglais technique c'est un peu plus simple, tu vas arriver à comprendre !

                            • Partager sur Facebook
                            • Partager sur Twitter

                            Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

                              30 juin 2020 à 13:49:52

                              Lamecarlate a écrit:

                              je pensais même que tu t'en étais inspiré, -RR-

                              En fait je me suis douté que c'était un fonctionnement similaire. J'ai ouvert l'article, j'ai vu qu'il y avait du display: block et du display: none.

                              Du coup j'étais pas fan parce que ça ne permet pas d'animer une transition de background avec transform (à moins qu'il y ait d'autres solutions aujourd'hui?).

                              Mais j'avais pas vu que l'article utilisait la même technique pour mettre un élément actif par défaut. Moi qui pensais avoir bidouillé...:D

                              @CentreDordi: t'as plus qu'à voir selon ton besoin. Au moins ça montre qu'en CSS il y a plusieurs façon d'arriver à une même solution. :p

                              • Partager sur Facebook
                              • Partager sur Twitter
                                Staff 30 juin 2020 à 13:58:07

                                Alors, display: none est quand même conseillé, car cela permet de vraiment cacher les "pages" aux lecteurs d'écran (c'est ce qui fait que ça ne pose aucun souci d'avoir la première "page" en dernier dans le HTML). Ou alors faut jouer avec aria-hidden, et donc ajouter une petite couche de JavaScript.
                                • Partager sur Facebook
                                • Partager sur Twitter

                                Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

                                  30 juin 2020 à 14:00:11

                                  Merci pour la précision, en effet, je n'avais pas du tout pensé à cet aspect...

                                  • Partager sur Facebook
                                  • Partager sur Twitter

                                  Désactiver le scrolling horizontal

                                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                  • Editeur
                                  • Markdown