title: Scrolling lag on mobile devices after applying modified scroll direction
body: <p>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.</p>
  
  <p>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: <a href="https://stackoverflow.com/questions/7912393/modify-scroll-direction">Modify scroll direction</a></p>
  
  <p>Here is the link to the website from the question: <a href="http://buero-buero.org/" rel="nofollow noreferrer">http://buero-buero.org/</a></p>
  
  <p>Apperently they are using this:</p>
  
  <pre><code>&lt;script&gt;
  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';
  }
  &lt;/script&gt; 
  </code></pre>
  
  <p>Here is how it looks like on my phone:</p>
  
  <p><a href="https://i.stack.imgur.com/OLu8C.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OLu8C.gif" alt="enter image description here"></a></p>
  
  <p>As you can see it is butter-smooth, even though I've reduced the fps to fit in 2MB limit for the gif.</p>
  
  <p>My function looks like that:</p>
  
  <pre><code>$(".wrap-work-right").css("bottom", window.scrollY * -1);
  </code></pre>
  
  <p>In both cases, scroll direction is manipulated by changing <code>bottom</code> value - not only but lets focus on <code>bottom</code>.</p>
  
  <p>Here is how my function looks like on my phone:</p>
  
  <p><a href="https://i.stack.imgur.com/hEJvw.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hEJvw.gif" alt="enter image description here"></a></p>
  
  <p>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 <code>window.scrollY * -1</code>.</p>
  
  <p>It might change, because I keep on testing different options but here is link to my website (test version): <a href="http://mateuszkusz.com/" rel="nofollow noreferrer">http://mateuszkusz.com/</a> — I am still working on it. Since I am a begginer, I can not guarantee it is going to work on all browsers.</p>
  
  <p>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 <code>translateY</code> instead of <code>bottom</code>:</p>
  
  <pre><code>var shiftValue = $(window).scrollTop() * 1 + 'px';
  $('.wrap-work-right').css('transform', 'translateY(' + shiftValue + ')');
  </code></pre>
  
  <p>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?</p>
  
  <p>I am trying to repair this for 2 days but I am out of ideas so I would be grateful for any hint.</p>
  
  <p><strong>EDIT:</strong> As na experiment I've removed connection between js file and index. I've decided to test plain javascript:</p>
  
  <pre><code>&lt;script&gt;
  window.onscroll = function() {
  document.getElementsByClassName("wrap-work-right")[0].style.bottom = '-' + window.scrollY + 'px';
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>It seems like it works better but only when gifs are out of view. I will have to do some more testing.</p>
  
  <p><strong>EDIT:</strong> Here is jsfiddle of my reverse scroll function (simplified version):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).on("scroll resize", function(){
  
    $(".right").css("bottom", window.scrollY * -1);
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrapp absolute"&gt;
    &lt;div class="left"&gt;
      &lt;div class="break-off break-screen"&gt;&lt;/div&gt;
      &lt;div class="shot"&gt;&lt;/div&gt;
      &lt;div class="break-off break-shot"&gt;&lt;/div&gt;
      &lt;div class="shot"&gt;&lt;/div&gt;
      &lt;div class="break-off break-screen"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wrapp"&gt;
    &lt;div class="right"&gt;
      &lt;div class="shot"&gt;&lt;/div&gt;
      &lt;div class="break-off break-shot"&gt;&lt;/div&gt;
      &lt;div class="shot"&gt;&lt;/div&gt;
      &lt;div class="break-off break-screen"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>