Besoin d'aide ?

Scroller dans la div d'a côté

  • Avatar de SquallX
    Membre depuis :
    04/11/2014
    Messages :
    126

    Salut à vous,

    Aujourd'hui j'arrive avec un petit problème JS que je n'arrive pas à résoudre, je ne sais pas si le soucis provient du CSS qui est particulier ou bien du JS qui est trop simple, j'ai une section en flex divisé en deux blocs côte à côte, le premier qui contient une photo en background (environ 60% de largeur), le second qui contient 3 div contenant des éléments HTML (texte avec mise en forme), chacun de ces blocks fait 100vh de hauteur au minimum, et j'applique un scroll overflow pour qu'on puisse les voir au scroll. Les éléments à l'intérieur de la div de droite font également 100vh de hauteur, portant la div parent à 300vh de hauteur.

    Ce que j'aimerais faire, c'est que lorsqu'on scrolle dans la div de gauche (celle contenant la photo), cela scroll automatiquement dans la div de droite jusqu'à fin du contenu pour scroller normalement sur la page.

    Voici mon code actuel pour la section en question :

    page-studios {

    margin: 0;
    position: relative;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .picture {
    background-image: url('./../imgs/backgrounds/studios.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: $sectionSize;
    width: 60%;
    }

    .studios-list {
    height: $sectionSize;
    overflow: scroll;
    width: 35%;
    margin: 0;
    padding: 0;

    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    }

    <section class="section page-studios">
    <div class="picture scroll-on">

    </div>
    <div class="studios-list scroll-to">
    <div class="studio">
    <!-- Contenu -->
    </div>
    </div>
    </section>

    J'ai tenté avec le bout de Javascript suivant, mais sans succès :


    let scrollTo = $('.scroll-to');
    $('.scroll-on').scroll(function() {
    scrollTo.prop("scrollTop", $(this).scrollTop)
    .prop("scrollLeft", $(this).scrollLeft);
    });

    Selon vous, quelle serait la bonne méthode pour implémenter ce scroll ? Cela pourrait-il venir de mes propriétés CSS ?

    Merci à vous d'avance pour votre aide =)

    Cordialement,
    Alexandre.

Vous ne pouvez pas répondre à ce sujet.