Sujet Précédent Sujet Suivant

Scroll horizontale avec boutons

Fermé
Rackham73 Messages postés 1 Date d'inscription dimanche 8 mars 2020 Statut Membre Dernière intervention 8 mars 2020 - 8 mars 2020 à 14:43
 Autoexe - 10 mars 2020 à 17:58
Bonjour , voila je suis en train de faire un cv en horizontale , avec des boutons pour faire défiler les pages en mode "onePage"(pas sûr du terme) à l'aide de jquery. Le problème est que dés que je met un overflow : hidden les défilements via les boutons ne fonctionnent plus correctement , ça part dans tout les sens et sans le overflow ça fonctionne niquel mais vue que je ne veut pas de scroll à la molette que via les boutons ça me pose des soucis ^^.
Merci par avance pour votre aide :)
Le code est en dessous

voici le html. 

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>CV</title>
</head>

<body>
    <nav>
        <button id="profilButton">Profil</button>
        <button id="competenceButton">Competences</button>
        <button id="loisirsButton">Loisirs</button>
        <button id="contactsButton">Contacts</button>
        <h1>Développeur Web et Web Mobile</h1>
    </nav>

    <div id="thePage">

        <div id="profil">
            <article id="idCard">
                <img id="picture" src="" alt="">
                <span id="name"></span>
            </article>
            <article id="textProfil">

            </article>
        </div>


        <div id="competences">
            <div id="language">
                <h2>Languages Informatiques</h2>
                <ul>
                    <li><img src="images/CSS3_and_HTML5_logos_and_wordmarks.svg.png">HTML/CSS</li>
                    <li><img src="images/JavaScript5.png">JavaScript</li>
                    <li><img src="images/php_emblem.png">PHP</li>
                </ul>
            </div>
            <div id="frameWork">
                <h2>FrameWork</h2>
                <ul>
                    <li><img src="images/bootstrap-stack.png">Bootstrap</li>
                    <li><img src="images/jQuery_logo.png">JQuery</li>
                    <li><img src="images/symfony.original.png">Symfony</li>
                </ul>
            </div>
            <div id="baseDeDonnees">
                <h2>Base de données</h2>
                <ul>
                    <li><img src="images/mysql.png">MySQL</li>
                </ul>
            </div>
            <div id="personnelles">
                <h2>Personnelles</h2>
                <ul>
                    <li>Travail en équipe</li>
                    <li>Organisation</li>
                    <li>Responsabilités</li>
                    <li>Développement de soi et de ses compétences</li>
                    <li>Traitements d'informations classifiées.</li>
                </ul>
            </div>
        </div>

        <div id="loisirs">
            <h1>Mes passions et loisirs</h1>
        </div>

        <div id="contacts">
            <h1>Me contacter </h1>
        </div>
    </div>
    <!-- <img id="snakeBox" src="snakeBox.gif" alt=""> -->
    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="javascript/script.js"></script>
</body>

</html>


Le css 


html,body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
}
nav{
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    z-index: 5;
}
#thePage{

    z-index: 0;
    display: inline-block;
    flex-direction: row;
    height: 100%;
    width: 100%;

}
#profil{
    background-color: aqua;
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: top;
    align-items: left;
    padding-top: 100px;
}
#idCard{
    height: 30%;
    width: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}
#picture{
width: 60%;
}
#name,#picture{
margin: 10px;
}
#competences{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: top;
    align-items: left;
    padding-top: 100px;
}
#language,#frameWork,#baseDeDonnees,#personnelles{
    width: 50%;
    height: 70%;
}
img{
    width: 15%;
}
#snakeBox{
    position: relative;
}
#loisirs{
    background-color: chocolate;
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: top;
    align-items: left;
    padding-top: 100px;
}
#contacts{
    background-color: brown;
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: top;
    align-items: left;
    padding-top: 100px;
}


Et le javascript 

$(document).ready(function () {
    $("#profilButton").click(function () {
        event.preventDefault();
        $('html,body').animate({ scrollLeft: $("#profil").offset().left }, 1000 
        );
        
    });
    $("#competenceButton").click(function () {
        event.preventDefault();
        $('html,body').animate({ scrollLeft: $("#competences").offset().left }, 1000
        );
        
    });
    $("#loisirsButton").click(function () {
        event.preventDefault();
        $('html,body').animate({ scrollLeft: $("#loisirs").offset().left },  1000
        );
        
    });
    $("#contactsButton").click(function () {
        event.preventDefault();
        $('html,body').animate({ scrollLeft: $("#contacts").offset().left },  1000 
        );
        
    });

});

1 réponse

Réponse 1 / 1
Autoexe
Modifié le 10 mars 2020 à 18:00
Salut la barre de défilement si elle n'existe pas ne pourra pas défiler:
overflow : hidden
ne signifie pas seulement qu'elle est cachée mais qu'il n'y en a pas.
Regardez les propriétés possible pour la propriété hidden si vous ne comprenez pas mais l'explication est toute simple: pas de barre de défilement(si vous indiquez overflow hidden) donc il n'y aura pas de défilement possible, pas plus compliqué que ça.
"et sans le overflow " plutôt avec la valeur par défaut qui est "both"
0

Discussions similaires

A quoi sert la touche "scroll lock" ?
LAKESSE -
loutre -

5 réponses
Scroll Lock actif
Sylvie -
captainejojo -

17 réponses
éteindre la touche scroll lock
twal -
depassage -

4 réponses
activer/désactivé touche scroll
GII -
pwei -

9 réponses
scroll lock
cyril -
bagfender -

9 réponses