Partage

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

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.

-RR-

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?

CentreDordi

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 #...

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.

Aless1

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.

CentreDordi

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 #. )

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.

Lamecarlate

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/ .

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

CentreDordi

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...

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.

-RR-

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

CentreDordi

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 !

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.

Lamecarlate

30 juin 2020 à 12:19:35

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

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

-RR-

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.

CentreDordi

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.

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.

Lamecarlate

30 juin 2020 à 13:37:58

Mais ya pas de honte à avoir ! 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 !

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

-RR-

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é...

@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.

Lamecarlate

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.

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

-RR-

30 juin 2020 à 14:00:11

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