How can you make the jQuery scroll() function to fire a second function?

Question

My attempt: https://codepen.io/alexyap/pen/gRLeVY?editors=1010

$(document).ready(function(){

$(document).scroll(function(e){

e.preventDefault();

$("#mainContainer").css("transform", "translateX(-100vw)");

})


})

This is driving me nuts. I'm trying to make my site scroll a full page horizontally. I figured the first part out but alas it stops working after the second scroll.

PS: from my pen you can see I have the body set to overflow hidden but have it commented out (my code only works if I don't have it set so).

Someone please help me figure this out.

Answer 1

In your CodePen, I only added e between the parenthesis in
$(document).on('mousewheel', function(e){

That is the event object passed to your function.
It is needed to compare the wheel delta.

You had it in the $(document).ready(function(e){ where it was useless.

So here is your CodePen updated just like this.

---

Just for fun ... I customized it a little more by foreseeing what someone would like to change using this "div translation" effect.

The first thing is certainly the div amount.
And the translation "fraction" would be another thing...
And a minimum delay between each translation.

So here is a CodePen taking this in account .