Partage

Scroll Horizontal

Portfolio, faire un site hozirontal

Sujet résolu

28 novembre 2017 à 20:23:48

Bonjour,

j'aimerais réaliser un portfolio, mais j'aimerais que celui-ci soit horizontale et non verticale ( à la manière d'un site one page mais sur le coté ), j'aimerais pouvoir avoir un site horizontale avec la barre de scroll en bas et non pas sur le coté, et que le scroll via la souris fonctionne. J'aimerais ainsi savoir comment est-il possible de réaliser cela?

J'ai fais plusieurs test, certains avec plugins d'autres sans, et j'ai toujours eu des problèmes, notamment, le scroll de la souris qui ne fonctionne pas, ou la barre de défilement qui se situe toujours a gauche a la verticale et qui ne fonctionne pas a l'horizontale..

Merci, je galère depuis quelque jours donc je viens chercher de l'aide ici

LCaba

28 novembre 2017 à 21:53:57

Salut

En CSS tu peux simplement utiliser la propriété overflow pour avoir une barre de scroll horizontale.

Si tu veux pas la barre de scroll par défaut tu utilises overflow : hidden et l'événement mousewheel pour gérer le scroll de la souris

-
Edité par LCaba 28 novembre 2017 à 21:54:27

Cabinet vétérinaire à Angers

bocaldesmers

28 novembre 2017 à 22:06:22

comme l'a dit LCaba tu peux faire comme ceci:

<style>
#div{
	width: 100px;
	overflow-y: auto;
}
</style>

<html>
    <div id="div">ertgrtehtyrjhgetrgrthge'rzgryth(§ety'etrhrtegfrdfhtyhgertfrthytukiuykuytjhgrtefergtyrhg</div>
</html>

Mais pas sur que ça fonctionne avec tous les navigateurs

Quand on fait tout, on est bon en rien...

LCaba

28 novembre 2017 à 23:24:52

Les navigateurs qui supportent pas overflow-x se font rares

Cabinet vétérinaire à Angers

Rougelz

29 novembre 2017 à 22:48:48

Je suis de retour après avoir tester mais j'ai toujours le problème de la barre verticale de défilement toujours présente sur la droite, ainsi que la barre horizontale qui ne fonctionne pas avec le scroll de la souris.

Je vous met mon code ici:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="ok">
	<div id="test1">
    </div>
	<div id="test2">
    </div>
</div>
</body>
</html>

*{
	margin:0;
}

html,body{
	height:100%;
	
}

#test1{
    width: 100%;
    height:99%;
    background-color:red;
  display:inline-block;
}

#test2{
    width: 100%;
    height:99%;
    background-color:blue;
  display:inline-block;
}

#ok 
{
	height:100%;
	width:100%;
	overflow-y:auto;
	display:inline-block;
	white-space:nowrap;
	
	
}

De plus, si quelqu'un sait comment enlever le petit espace blanc présent entre mon bloc bleu et rouge, je suis preneur ! Merci à vous.

-
Edité par Rougelz 29 novembre 2017 à 23:10:35

bocaldesmers

29 novembre 2017 à 23:44:36

Bonjour, je viens de voir que je m'éttais trompé dans mon post précédent.

c'est pas overflow-y:auto;

mais

overflow-x:auto;

du coup voici le code qu'il te faut:

#ok
{
    height:100%;
    width:100%;
    overflow-y: hidden;
    overflow-x: auto;
    display:inline-block;
    white-space:nowrap;
     
     
}

Pour supprimer l'espace blanc, 2 solutions:

soit tu met tes 2 div cote à cote dans ton code html comme ceci

<div id="test1"></div><div id="test2">

soit dans ton css tu applique une marge négative sur ta div de droite comme ceci

#test2{
    width: 100%;
    height:99%;
    background-color:blue;
    display:inline-block;
    margin-left: -10px;
}

Voila j'ai testé et chez moi ça marche nickel sur tous les navigateur sauf ie que je n'ai pas tester car je suis sur osx et sur firefox ou l'ascenseur vertical persiste à s'afficher mais n’empêche pas le scroll horizontal

Quand on fait tout, on est bon en rien...

Rougelz

30 novembre 2017 à 17:53:20

Salut, merci pour l'aide cependant, le sroll de droite est toujours présent est le scroll horizontale ne fonctionne pas a la souris ( je suis sur chrome ), il y a juste la marge de résolue, je t'envoie mon code! et genre quand je scroll vers le haut, au lieu d'aller sur le coté comme prévu, ca me souleve un tout petit peu ma barre de defilement horizontale je ne comprend pas trop..

*{
	margin:0;
}

html,body{
	height:100%;
	
}

#test1{
    width: 100%;
    height:99%;
    background-color:black;
    display:inline-block;
}

#test2{
   
    width: 100%;
    height:99%;
    background-color:yellow;
    display:inline-block;
    margin-left: -10px;
}

#ok 
{
	height:100%;
    width:100%;
    overflow-y: hidden;
    overflow-x: auto;
    display:inline-block;
    white-space:nowrap;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="ok">
	<div id="test1">
    </div>
	<div id="test2">
    </div>
</div>
</body>
</html>

-
Edité par Rougelz 30 novembre 2017 à 17:54:56

bocaldesmers

30 novembre 2017 à 19:17:10

Apparemment pour faire ce ce que tu veux tu va être obliger de passer par du js

j'ai trouver 2 lien qui pourrons peu être t'aider.

https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

http://manos.malihu.gr/jquery-custom-content-scroller/

je testerais quand j'aurai le temps en attendant si tu trouve ton bonheur fais nous le retour.

Quand on fait tout, on est bon en rien...

Rougelz

30 novembre 2017 à 21:32:51

je suis déjà tomber sur ces liens aussi mais je n'ai pas vraiment compris comment utiliser les plugins..

LCaba

30 novembre 2017 à 23:38:44

y a pas besoin de plugin. Au lieu de mettre ton overflow en auto, tu le passes en hidden comme je disais plus haut.

et tu modifies le margin-left ou le left en fonction du scroll de la souris : https://jsfiddle.net/m0je3tbc/1/

Cabinet vétérinaire à Angers

Rougelz

1 décembre 2017 à 16:12:13

C'est ce que j'ai fais mais la barre de scroll verticale reste et le scroll de la souris ne fonctionne pas pour défiler horizontalement.

Rougelz

4 décembre 2017 à 17:01:11

J'ai trouvé un code sur codepen, me permettant PRESQUE de faire ce que je veux, je vous l'envoie et vous explique mon problème.

<div id="container">
  <div id="container2">
    <div class="box one"><div>1</div></div>
    <div class="box two"><div>2</div></div>
    <div class="box three"><div>3</div></div>
    <div class="box four"><div>Last</div></div>
  </div>
</div>

body {
  margin:0;
  font-family:Georgia;
}
#container .box {
  width:100vw;
  height:100vh;
  display:inline-block;
  position:relative;
}
#container .box > div {
  width:100px;
  height:100px;
  font-size:96px;
  color:#FFF;
  position:absolute;
  top:50%;
  left:50%;
  margin:-50px 0 0 -50px;
  line-height:.7;
  font-weight:bold;
}
#container {
  overflow-y:scroll;
  overflow-x:hidden;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color:#999;
  position:absolute;
  width:100vh;
  height:100vw;
}
#container2 {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  white-space:nowrap;
  font-size:0;
}

.one {
  background-color: #45CCFF;
}
.two {
  background-color: #49E83E;
}
.three {
  background-color: #EDDE05;
}
.four {
  background-color: #E84B30;
}


/* Translating the content's X ruines the scrollbar length. */
/*
#container {
  overflow:scroll;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
  background-color:#999;
  position:absolute;
  width:100vh;
  height:100vw;
}
#container2 {
  transform: rotate(-90deg) translateX(-100vw);
  transform-origin: top left;
  white-space:nowrap;
}
*/

Comme vous pouvez le voir, la barre de défilement est situé en haut de la page, et j'aimerais la mettre en bas, voir la supprimer si ce n'est pas possible de la déplacer, deplus si la barre cache une partie de la page !

LCaba

4 décembre 2017 à 17:22:14

C'est un peu tordu toutes ces transition, mais si ça te va, tu peux simplement virer la barre de scroll et modifier le scrollTop de #container (parce que du coup c'est le scrollTop qui fait défiler vers la droite) en fonction de event.deltaY ou .deltaX lors de l'événement 'mousewheel'.

Cabinet vétérinaire à Angers

Rougelz

4 décembre 2017 à 18:12:42

Je trouve ça tordu aussi, mais bon, apparemment on a pas le choix pour faire ça..

Après les transformation ca devrait pas géner au niveau du code? a part cette partie de code spécial, que j'isolerais dans un coin de mon css afin de plus y toucher, je devrais avoir un code normal non?

Mais je ne comprend pas trop ce que tu m'as dis

-
Edité par Rougelz 4 décembre 2017 à 18:15:33

LCaba

4 décembre 2017 à 18:51:50

Comme ça (en passant le overflow-y à "hidden") :

document.getElementById('container')
.addEventListener('mousewheel', function(e) {
    this.scrollTop += e.deltaY;
});

Cabinet vétérinaire à Angers

Rougelz

5 décembre 2017 à 23:58:53

J'ai réussis mais du coup ca supprime la barre et ca ne la déplace pas en bas.. dommage j'essaierais de rajouter quelque chose pour faciliter la navigation si ce n'est pas possible de garder cette barre en bas

-
Edité par Rougelz 6 décembre 2017 à 0:02:56

LCaba

6 décembre 2017 à 0:00:09

Non pourquoi ?

Cabinet vétérinaire à Angers

Rougelz

6 décembre 2017 à 0:10:06

body {
  margin:0;
}
#container .box {
  width:100vw;
  height:100vh;
  display:inline-block;
  position:relative;
}
#container .box > div {
  color:#FFF;
  position:absolute;
 /* font-size:10px; */
}
#container {
  overflow-y:hidden;
  overflow-x:hidden;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color:#999;
  position:absolute;
  width:100vh;
  height:100vw;
}
#container2 {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  white-space:nowrap;
  font-size:0;
}
 
.one {
  background-color: #45CCFF;
}
.two {
  background-color: #49E83E;
}
.three {
  background-color: #EDDE05;
}
.four {
  background-color: #E84B30;
}

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<link rel="stylesheet" href="style.css">
	<script src="jquery-3.2.1.min.js"></script>
</head>
<body>

</body>
</html>


<div id="container">
  <div id="container2">
    <div class="box one"><div>Bonjour</div></div>
    <div class="box two"><div>2</div></div>
    <div class="box three"><div>3</div></div>
    <div class="box four"><div>Last</div></div>
  </div>

  <script type="text/javascript">
			document.getElementById('container')
.addEventListener('mousewheel', function(e) {
    this.scrollTop += e.deltaY;
});
	</script>	
</div>

Voici mon code, et ca fonctionne mais la barre de défilement n'est pas en bas mais elle a disparu..

Par contre j'ai un nouveau problème, quand je baisse trop le font-size ou que je l'enlève ( il est en commentaire, je ne vois plus l'écriture..

LCaba

6 décembre 2017 à 0:33:16

Je pensais que c'était ce que tu voulais, ne plus avoir la barre, mais j'ai mal lu?

Pour le reste, c'est plutôt du CSS et je te conseille plutôt de poster dans le forum dédié tu auras plus de réponses pertinentes

Cabinet vétérinaire à Angers

Rougelz

6 décembre 2017 à 20:03:17

Voila le code pour les personnes étant intéresser, tout fonctionne comme prévu

body {
  margin:0;
}
#container .box {
  width:100vw;
  height:100vh;
  display:inline-block;
  position:relative;


}
#container .box > div {
  color:#FFF;
  position:absolute;
 /* font-size:10px; */  
}
#container {
  overflow-y:hidden;
  overflow-x:hidden;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color:#999;
  position:absolute;
  width:100vh;
  height:100vw;
}
#container2 {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  white-space:nowrap;
  font-size:0;
}
 
.one {
  background-color: #45CCFF;


}
.two {
  background-color: #49E83E;

}
.three {
  background-color: #EDDE05;

}
.four {
  background-color: #E84B30;
}

.box
{font-size:16px;}

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<link rel="stylesheet" href="style.css">
	<script src="jquery-3.2.1.min.js"></script>
</head>
<body>





<div id="container">
  <div id="container2">
    <div class="box one">Bonjour</div>
    <div class="box two">2</div>
    <div class="box three">3</div>
    <div class="box four">Last</div>
  </div>

  <script type="text/javascript">
			document.getElementById('container')
.addEventListener('mousewheel', function(e) {
    this.scrollTop += e.deltaY;
});
	</script>	
</div>
</body>
</html>