Hello à tous,
Tout nouveau ici, je vous expose mon problème.
Selon les besoins du client, sur un thème wordpress maison, j'ai eu besoin de faire un site qui contraint la navigation d'un one-page dans des parties (<section>), depuis un menu.
Donc tout est en overflow: hidden,
à part les <section> (qui contiennent des articles)
Ce qui donne en CSS :
La navigation marche impeccable,
sauf que, impossible au scroll de faire réduire les barres de navigation en haut et en bas sur les navigateurs mobiles, ce qui peut sembler logique.
Y a-t-il un moyen de contourner cela?
Merci d'avance.
Modifié par mr_ez (02 Jun 2020 - 13:29)
Tout nouveau ici, je vous expose mon problème.
Selon les besoins du client, sur un thème wordpress maison, j'ai eu besoin de faire un site qui contraint la navigation d'un one-page dans des parties (<section>), depuis un menu.
Donc tout est en overflow: hidden,
à part les <section> (qui contiennent des articles)
<body>
<div id="primary">
<div id="main">
<article id="intro"></article>
<section>
<article>...</article>
<article>...</article>
<article>...</article>
</section>
<section>
<article>...</article>
<article>...</article>
</section>
</div>
</div>
</body>
Ce qui donne en CSS :
body {
width: 100vw;
height: 100%;
margin: 0;
overflow: hidden;
}
#primary {
position: relative;
width: 100vw;
height: calc( 100vh - 16vw );
margin: 8vw 0;
overflow: hidden;
}
#main {
overflow: hidden;
height: 100%;
width: 100%;
}
#main > section {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100%;
padding: 0 4vw;
...
}
article {
scroll-snap-align: start;
}
La navigation marche impeccable,
sauf que, impossible au scroll de faire réduire les barres de navigation en haut et en bas sur les navigateurs mobiles, ce qui peut sembler logique.
Y a-t-il un moyen de contourner cela?
Merci d'avance.
Modifié par mr_ez (02 Jun 2020 - 13:29)
