3

Using Locomotive scroll causes some flickering when scrolling upwards. The elements in the upper sections appear in the viewport with a small but noticeable lag (maybe 0.1 sec). I saw a lot of demos, but almost all of these websites have the same issue. For example, the official demo: look at the section "04. Fixed elements" - the image is flickering when scrolling up to it.

Is it unavoidable when using Locomotion smooth scrolling?

P.S. Chrome 97.0 on Windows

UPDATE 1 That problem appears only on Chrome based browsers since 94 version due to implementation of their virtual-scroller.

Have found a temporal solution:

.has-scroll-smooth 
{position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;}

But this breaks the layout if you use fixed position for some elements on the page.

bersus
  • 31
  • 1
  • 5

2 Answers2

1

I was facing the same issue till now, but I have started playing with matrix3D coordinates and finally, I have fixed it.

Just find your matrix3D coordinates from locomotive-sroll.min.js and replace them with the below value.

Thank me later.

key: "transform",
value: function(t, e, i, s) {
    var n;
    if (s) {
        var o = q(t),
            r = F(o.x, e, s),
            l = F(o.y, i, s);
           n = "matrix3d(1,0,1,0,0,1,0,0,0,0,1,0,".concat(r, ",").concat(l, ",0,1)");
    } else n = "matrix3d(1,0,1,0,0,1,0,0,0,0,1,0,".concat(e, ",").concat(i, ",0,1)");
    console.log(n);
    t.style.webkitTransform = n, t.style.msTransform = n, t.style.transform = n
}
Pradip Parmar
  • 131
  • 1
  • 3
0

save yourself the hassle and use the native Method

Test Code Here

and make your own function like:

// scroll to element smoothly via native built in function on said element
// just change x13 to the id of your element or use the scrollIntoView Function on an element which you can get from various document.querySelector or others.

document.getElementById('x13').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
Dean Van Greunen
  • 5,060
  • 2
  • 14
  • 28
  • Thank you for the answer. But Locomotive Scroll lets you scroll smooth across the entire page, not only to a certain element. It overlays the native mouse wheel scrolling. – bersus Jan 16 '22 at 06:13