Move section horizontally while scrolling on a page

Question

I'm trying to move a div in a page horizontally using transform:translate3d(xValue, 0px, 0px). 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.

//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 > 0) // Scroll right
        horizontal_move -= race;     
    else // Scroll left
        horizontal_move += race;
    var scroll_anim = "transform: translate3d("+horizontal_move+"px, 0px, 0px);";
    if(horizontal_move <= 0 && horizontal_move >= -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();
    }
});

Could someone enlighten me as to fix it? Thanks in advance.