Elements disappearing when scroll back to the top #361
Comments
|
Duplicate of #353 - Chrome update compromising the viability of virtual scroll. There does appear to be a temporary fix referenced by @vitass.
|
|
@Dushyant1295 , Thanks for solving my headaches. |
|
I noticed that there was no screen recording of the issue, so here is an example of the problem, for clarity: Note in my case, adding the following fixes the issue whilst Google hopefully works on a solution: html.has-scroll-smooth {
backface-visibility: hidden;
transform: translateZ(0);
}
[data-load-container] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
} |
|
@elliottmangham Hi, I have been trying to solve the same issue for days now, now I'm here, but I have no idea how to use this solution, actually, this is my first time using this plugin, also I'm using gsap with scrollTrigger at same project, facing so many issues, solving them, struggling with them. This issue was from the very beginning of the project and didn't find any solution until now, but I don't know how to apply it. So I was wondering if you could share the markup- the main scroller, sroll-section and how to wrap them with the Thank you all in advance. |
|
not sure this is helpful, but i was having a similar issue and adding height: 100vh to the body tag sorted it out. I tried it on the locomotive website link you posted above and it also sorted it out on that site ! the alement which am assigning to el when am instantiating the scroll is a div that is a child of the body. |
|
@TanimMahbub thank you for your patience! We use jQuery for most functionality, and GSAP for animations. Therefore, we do integrate ScrollTrigger with LocomotiveScroll. Below is a paste of core/main JS file, which initializes LocomotiveScroll with ScrollTrigger, and fires custom functions if/when certain DOM elements exist or globally used ones. I realize things could be a lot more modular and cleaner, using ES and whatever else, but our set-up isn't in a place to change right now! Javascript:/****************************************************************************
* Theme scripts.
****************************************************************************/
/***************
* Smooth scroll
***************/
// Initiate smooth scroll
var scroll = new LocomotiveScroll( {
el: document.querySelector( '[data-scroll-container]' ),
smooth: true,
getDirection: true
} );
// On scroll
scroll.on( 'scroll', ( instance ) => {
// Sync positioning with GSAP ScrollTrigger
ScrollTrigger.update();
// Add direction to DOM
document.documentElement.setAttribute( 'data-scrolling', instance.direction );
} );
// Tell ScrollTrigger to use these proxy methods
ScrollTrigger.scrollerProxy( '[data-scroll-container]', {
scrollTop( value ) {
return arguments.length ? scroll.scrollTo( value, 0, 0 ) : scroll.scroll.instance.scroll.y;
},
getBoundingClientRect() {
return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
},
pinType: document.querySelector( '[data-scroll-container]' ).style.transform ? "transform" : "fixed"
} );
// Set ScrollTrigger defaults
ScrollTrigger.defaults( {
scroller: '[data-scroll-container]'
} );
// Store cursor position information
var currentMousePos = { x: -1, y: -1 };
$( document ).mousemove( function( event ) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
} );
/***************
* Transitions
***************/
// Set classes for document
document.documentElement.classList.add( 'is-loaded' );
document.documentElement.classList.remove( 'is-loading' );
setTimeout( () => {
document.documentElement.classList.add( 'is-ready' );
}, 300 );
/***************
* Theme scripts
***************/
( function( $ ) {
'use strict';
setTimeout( () => {
$( '.c-example' ).each( cExample );
fnInViewDetection();
fnPageTransition();
oCursor();
}, 1000 );
} )( jQuery );
/***************
* After theme scripts
***************/
// Each time the window updates, refresh ScrollTrigger and then update LocomotiveScroll
ScrollTrigger.addEventListener( 'refresh', () => scroll.update() );
// After everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();
// END OF DOCUMENTHTML/PHP<body>
<div data-load-container>
<div class="o-scroll" data-module-scroll="main" data-scroll-container>
<section class="c-example1" data-scroll-section data-comp="example1">Example 1</section>
<section class="c-example2" data-scroll-section data-comp="example2">Example 2</section>
</div>
</div>
</body>I hope this helps you! |
|
@elliottmangham Thank you so much for your help my friend, it will be a very big contribution to my learning. |
|
I came across this bug with another virtual scroll package. I fixed it by setting the perspective of the scrolling container to an arbitrary value. Even |
|
The most reliable way seems to add |
|
Adding |
thank you it work for me 馃枻馃枻 |
@LeonBaudouin Encountering a similar issue but not with locomotive. Your solution saved my day. Thank you! |
|
This should be marked ad completed, the issue is not coming from locomotive-scroll @nicolasgermeaux |
Hello community 馃憢
Describe the bug
On a personal project I noticed sometimes when we scroll back to the top, some elements on the header are disappearing. After a lot of researches I noticed the problem is also on the locomotive scroll website.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Here is an image showing before/after the problem :
BEFORE :
AFTER :
Desktop (please complete the following information):
Can you tell me if you have already seen this? Thanks in advance for your help and great job with all the work you do! 馃憡
The text was updated successfully, but these errors were encountered: