Défilement infini après l'application du défilement inverse

Question

Tout d'abord, je suis désolé de multiplier les questions sur le défilement inverse. Je sais qu'il y a beaucoup de réponses, mais après de nombreuses heures de recherche et d'essais, je ne suis toujours pas capable de mettre en place cette info sur mon propre site.

Comme vous pouvez le voir dans le titre, après avoir appliqué le défilement inverse, je peux faire défiler infiniment mon site, ce qui me laisse avec un résultat indésirable. Voici un exemple pour vous donner un bon coup d'oeil à mon problème:

$(document).ready(function() { 
 
    $(window).scroll(function(){ 
 
    $('.right').css('transform', 'translate3d(0,' + $(this).scrollTop()*2 + 'px, 0)'); 
 
    }).scroll(); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html,body{ 
 
    height:100%; 
 
} 
 
.outside { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 
.left { 
 
    top: calc(100% - 48px); 
 
    position: absolute; 
 
    left: 0px; 
 
    width: calc(50% - 16px); 
 
} 
 
.right{ 
 
    bottom: calc(100% - 48px); 
 
    position: absolute; 
 
    right: 0px; 
 
    width: calc(50% - 16px); 
 
} 
 
.shot { 
 
    float: left; 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: #000; 
 
} 
 
.shot_gap { 
 
    float: left; 
 
    width: 100%; 
 
    height: 48px; 
 
} 
 
.release { 
 
    float: left; 
 
    width: 100%; 
 
    height: calc(100vh - 48px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outside"> 
 
    <div class="left"> 
 
    <div class="shot"></div> 
 
    <div class="shot_gap"></div> 
 
    <div class="shot"></div> 
 
    <div class="shot_gap"></div> 
 
    <div class="shot"></div> 
 
    <div class="shot_gap"></div> 
 
    <div class="shot"></div> 
 
    <div class="release"></div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="release"></div> 
 
    <div class="shot"></div> 
 
    <div class="shot_gap"></div> 
 
    <div class="shot"></div> 
 
    <div class="shot_gap"></div> 
 
    <div class="shot"></div> 
 
    <div class="shot_gap"></div> 
 
    <div class="shot"></div> 
 
    </div> 
 
</div>

Oryginaly .shot classe sera pas mis height - Je vais jeter quelques images dans cette div - même quantité et les dimensions de images pour .left et .right div. Quoi qu'il en soit, en regardant l'exemple, les éléments auraient du s'arrêter après avoir atteint une position similaire à celle de départ. Pour le forcer, j'ai inclus la classe .release. Malheureusement, ce n'est pas le cas dans l'exemple - cela fonctionne mais après avoir supprimé la classe .right de html, donc je suppose que le problème ici est javascript?

J'essayais de jouer avec cette solution: Reverse Scrolling mais je n'ai pas réussi à l'implémenter dans mon projet.

Je ne m'attends à personne pour résoudre mon problème. Ce serait bien si quelqu'un pouvait me diriger dans la bonne direction. Par exemple, en me laissant savoir ce qui est exactement trop, parce que je ne suis toujours pas sûr s'il s'agit de la ligne bottom: calc(100% - 48px) en classe .right ou peut-être que c'est juste le javascript.

Answer 1

Ok, je pense que je l'ai fait. Cela fonctionne mais je ne suis pas content de la façon dont j'ai réussi à le faire. Après la recherche, j'ai découvert que parent doit être réglé sur position: fixed, parce que sans cela, les éléments div, se déplacent dans des directions opposées les uns des autres rendant ma page indéfiniment long en faisant défiler - du moins c'est comme ça que je comprends cela. Malheureusement, je ne pouvais pas juste chager le position de ma classe .outside, parce que je perdrais alors la possibilité de faire défiler le site web du tout. Donc, la seule façon possible de faire ce travail, était de créer une nouvelle enveloppe au-dessus de .outside avec la position définie à fixed.

EDIT: Il est possible d'avoir un seul wrapper avec la position fixed. Il vous faut pour obtenir la hauteur totale de .left classe et l'appliquer à .body.

var totalHeight = $(".left").css("height"); 
$("body").css("height", totalHeight); 

Fin de EDIT

Cette fois, je l'ai utilisé un peu de code js différent - cela m'a beaucoup aidé: Reverse Scrolling

Voici la nouvelle version:

$(window).on('scroll',function(){ 
 
    $(".right").css('bottom',$(window).scrollTop()*-1); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body{ 
 
    height:100%; 
 
    width: 100%; 
 
} 
 
.outsideL { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.outsideR { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.left { 
 
    top: 0; 
 
    position: absolute; 
 
    left: 48px; 
 
    width: calc(50% - 64px); 
 
} 
 
.right{ 
 
    bottom: 0px; 
 
    position: absolute; 
 
    right: 48px; 
 
    width: calc(50% - 64px); 
 
} 
 
.shot { 
 
    float: left; 
 
    width: 100%; 
 
    height: 400px; 
 
    background-color: #000; 
 
} 
 
.shot_gap { 
 
    float: left; 
 
    width: 100%; 
 
    height: 48px; 
 
} 
 
.release { 
 
    float: left; 
 
    width: 100%; 
 
    height: calc(100vh - 48px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outsideR"> 
 
    <div class="right"> 
 
    <div class="shot"></div> 
 
    <div class="shot_gap"></div> 
 
    <div class="shot"></div> 
 
    <div class="shot_gap"></div> 
 
    <div class="shot"></div> 
 
    <div class="shot_gap"></div> 
 
    <div class="shot"></div> 
 
    <div class="release"></div> 
 
    </div> 
 
</div> 
 
\t 
 
<div class="outsideL"> 
 
    <div class="left"> 
 
    <div class="release"></div> 
 
    <div class="shot"></div> 
 
    <div class="shot_gap"></div> 
 
    <div class="shot"></div> 
 
    <div class="shot_gap"></div> 
 
    <div class="shot"></div> 
 
    <div class="shot_gap"></div> 
 
    <div class="shot"></div> 
 
    <div class="release"></div> 
 
    </div> 
 
</div>