Scrolling lag on mobile devices after applying modified scroll direction

Question

I've created a simple function which is responsible for reversing scroll direction but it seems like the feature is cpu heavy which is causing the lag on mobile devices - my assumption.

At first, I thought that it's gotta be that way and there is nothing I can do to optimize it, until I discovered website with similar function but with no lag at all. I discovered this in this question: Modify scroll direction

Here is the link to the website from the question: http://buero-buero.org/

Apperently they are using this:

<script>
function crisscross() {
$('down-left').style.bottom = '-' + window.scrollY + 'px';
$('down-right').style.bottom = '-' + window.scrollY + 'px';
$('left').style.left = '-' + window.scrollY + 'px';
$('right').style.right = '-' + window.scrollY + 'px';
}
</script> 

Here is how it looks like on my phone:

As you can see it is butter-smooth, even though I've reduced the fps to fit in 2MB limit for the gif.

My function looks like that:

$(".wrap-work-right").css("bottom", window.scrollY * -1);

In both cases, scroll direction is manipulated by changing bottom value - not only but lets focus on bottom.

Here is how my function looks like on my phone:

Left side works fine because it doesn't use any js. Right side where I apply the function, clearly can not keep up with calculating the window.scrollY * -1.

It might change, because I keep on testing different options but here is link to my website (test version): http://mateuszkusz.com/ — I am still working on it. Since I am a begginer, I can not guarantee it is going to work on all browsers.

Why is my version of reverse scroll direction so much slower? I was trying to replace gifs with mp4 and png files. I also tried to manipulate translateY instead of bottom:

var shiftValue = $(window).scrollTop() * 1 + 'px';
$('.wrap-work-right').css('transform', 'translateY(' + shiftValue + ')');

Other than that I've also cleared my js file leaving only one function to see if the cpu usage is lower but unfortunetaly the lag is still a thing. Maybe problem is on the server side?? I am using could hosting. Or maybe structure for my images is just too complicated?

I am trying to repair this for 2 days but I am out of ideas so I would be grateful for any hint.

EDIT: As na experiment I've removed connection between js file and index. I've decided to test plain javascript:

<script>
window.onscroll = function() {
document.getElementsByClassName("wrap-work-right")[0].style.bottom = '-' + window.scrollY + 'px';
}
</script>

It seems like it works better but only when gifs are out of view. I will have to do some more testing.

EDIT: Here is jsfiddle of my reverse scroll function (simplified version):

$(window).on("scroll resize", function(){

  $(".right").css("bottom", window.scrollY * -1);

});

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
  width: 100%;
}
.break-off {
  position: relative;
  float: left;
  width: 100%;	
}
.break-screen {
  height: calc(100vh - 48px);
}
.break-shot {
  height: 16px;
}
.wrapp {
  position: fixed;
  width: calc(100% - 48px); 
  left: 24px;
  top: 0px;
  height: 100vh;
}
.absolute {
  position: absolute;
}
.left {
  position: absolute;
  top: 0px;
  width: calc(50% - 8px);
  left: 0px;
}
.right {
  position: absolute;
  bottom: 0px;
  width: calc(50% - 8px);
  right: 0px;
}
.shot {
  float: left;
  position: relative;
  width: 100%;
  height: 400px;
  background-color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapp absolute">
  <div class="left">
    <div class="break-off break-screen"></div>
    <div class="shot"></div>
    <div class="break-off break-shot"></div>
    <div class="shot"></div>
    <div class="break-off break-screen"></div>
  </div>
</div>
<div class="wrapp">
  <div class="right">
    <div class="shot"></div>
    <div class="break-off break-shot"></div>
    <div class="shot"></div>
    <div class="break-off break-screen"></div>
  </div>
</div>

In past I had only one wrapper with position fixed. I was using jquery to get height of the left container and then I was applying it to the body to be able to scroll but in this scenario I had left and right side lagging at once.

Answer 1

After additional day of research and testing I know for sure what causes my gallery to lag while scrolling the page on mobile device (only in landscape mode, when the gallery is split into two columns and right side uses js). Please, keep in mind that my phone is not the fastest device on the market, in fact I've used Nexus 4 for testing, so pretty old model.

To the point: Apparently there was a bug in Chrome (2012 - 2016) where the browser couldn't properly and dynamically handle scaling down high resolution images, resulting in massive lag while scrolling.

Source: https://bugs.chromium.org/p/chromium/issues/detail?id=92812

I do not know if this bug still exist but I guess it's safe to assume that UX while scrolling will depend on the computing power of your device. I was able to confirm that, after uploading some random low resolution image to my website. The lag was no longer a thing. Just take a look:

As you can see, even fast scrolling is not lagging. I know I've used exact same image all over the page but while testing same image in high-rez, the scrolling lag was instantly noticeable.

Another argument is the fact that http://buero-buero.org/ is not fully responsive. They are using 1:1 images and no matter what, the page won't scale them down. That would explain why scrolling on buero is so much smoother, even though they are using more complex and heavier multimedia along with modified scroll direction.

This is the key: scaling high-res images down. Now look, I know that during my test with low res images, they were still scalling to fit the container, (because I didn't bother to calcutlate the size of an image to prevent the scalling) but the scale of a manipulation was much lower, allowing my stone-age phone to handle the scrolling properly.

The last thing of course is the javascript function (called on window.onscroll event) that only in combination with scaling high-rez images down, might generate scrolling lag - depending on the computing power of your device.

SUMMARY: It's not the modified scroll direction that is casuing the lag. It is the combination of the js and high-res images that were scaled down.

Since I want to use high-rez images, I guess I will just make my breakpoint trigger on 1024px so that people viewing my website on mobile devices will not experience scrolling lag.

Answer 2

You can use the folling css:

@media only screen and (max-width:767px){
    html, body {
      overflow-x: hidden;
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      scroll-behavior: smooth;
    }
}