title: Move section horizontally while scrolling on a page
body: <p>I'm trying to move a div in a page horizontally using <code>transform:translate3d(xValue, 0px, 0px)</code>.
  I've tried the below code and it is working when I try to scroll by placing the mouse pointer over the div. But if I'm scrolling from top to bottom continuously without pausing on this div the horizontal movement is not working and the content to the right side is not visible.</p>
  <pre><code>//Function to add horizontal scroll for portfolio section.
  const mouseWheel = document.querySelector('.my-wrapper-section');
  var horizontal_move = 0;
  mouseWheel.addEventListener('wheel', function(e) {
      const race = 50; // How many pixels to scroll
  
      if (e.deltaY &gt; 0) // Scroll right
          horizontal_move -= race;     
      else // Scroll left
          horizontal_move += race;
      var scroll_anim = &quot;transform: translate3d(&quot;+horizontal_move+&quot;px, 0px, 0px);&quot;;
      if(horizontal_move &lt;= 0 &amp;&amp; horizontal_move &gt;= -1500){
      //if horizontal_move is greater than 0, page scroll upwards and when horizontal_move reaches -1500 continue to scroll down
        jQuery('.my-wrapper-section').attr('style',scroll_anim);
        e.preventDefault();
      }
  });
  </code></pre>
  <p>Could someone enlighten me as to fix it? Thanks in advance.</p>