CODEWITHSUNDEEP
javascriptscrollhorizontal-scrolling
Park Lewis Sam
Park Lewis Sam

Reputation: 43

Linking Scroll right to scroll down

I have created a horizontal scroll site. One issue I am encountering is that the page only works on scroll down and users are consistently trying to scroll right. Was wondering if there is a custom code to "link" the scroll right behaviour to scroll down.?

Thanks

Upvotes: 4

Views: 572

Answers (2)

NO_GUI
NO_GUI

Reputation: 464

Here is an example for what Kyle Soeltz was suggesting:

    var lastScrollTop = window.pageYOffset;

  window.onscroll = function(e) {
    var st = window.pageYOffset || document.documentElement.scrollTop; 
   if (st > lastScrollTop){
      document.body.scrollLeft = st;
      
      console.log("right");
   } else if (st < lastScrollTop) {
      document.body.scrollLeft = st;

      console.log("left");
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
  }

It's tricky to get your page to scroll left and right exactly how you want it so you'll have to experiment with the document.body.scrollLeft = st; lines. You can also use .scrollBy({ left: 100, behavior: 'smooth' }); which is less jittery than the above, but there is a small delay because of the 'smooth' property. e.g.

    var lastScrollTop = window.pageYOffset;

  window.onscroll = function(e) {
    var st = window.pageYOffset || document.documentElement.scrollTop; 
   if (st > lastScrollTop){
      document.body.scrollBy({ left: 100, behavior: 'smooth' });

      console.log("right");
   } else if (st < lastScrollTop) {
      document.body.scrollBy({ left: -100, behavior: 'smooth' });

      console.log("left");
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
  }

Here's how to scroll right to trigger a scroll down event:

    var lastScrollX = window.pageXOffset;

  window.onscroll = function(e) {
    var st = window.pageXOffset || document.documentElement.scrollLeft; 
   if (st > lastScrollX){
      document.body.scrollBy({ top: 100, left: 0, behavior: 'smooth' });

      console.log("right");
   } else if (st < lastScrollX) {
      document.body.scrollBy({ top: -100, left: 0, behavior: 'smooth' });

      console.log("left");
   }
   lastScrollX = st <= 0 ? 0 : st; // For Mobile or negative scrolling
  }

Upvotes: 1

Kyle Soeltz
Kyle Soeltz

Reputation: 316

You can look into attaching the window.scrollBy method to a function called by the onscroll event.

Alternatively, if you are using JQuery, there is a mouse wheel plugin that will perform horizontal scrolling. Instructions for setting it up are well defined here.

Upvotes: 0

Related Questions