Jquery - horizontally scrolling div won't scroll using mouse wheel

JohnSmith
January 8, 2024
217 views
1 vote
2 Answers

I have a horizontally scrolling div that is easy to navigate via mac’s trackpad, but a nightmare to navigate using a mouse. The user has to actually click and drag via the scrollbar at the bottom of the page in order to scroll through the content.

I have tried implementing numerous solutions from this post to my code, but have yet to get any of them working.

Here is a link to a jsfiddle using one of the javascript solutions. Easy to scroll horizontally with the trackpad, but still unable to scroll horizontally using mousewheel.

I need to ensure that the solution doesn’t ruin the trackpad scrolling experience either, but simply makes it possible to also scroll using the mousewheel. For example, I see that if the user just holds the shift button, they can scroll perfectly normal with the mousewheel OR the trackpad. Maybe a workaround is just writing some code that forces the shift key to be pressed the entire time the user is on the page? Sounds like a dumb workaround lol. Would rather just use javascript that works.

Here is the code I’m attempting to use –

<script>
  
 const container = document.getElementById("horizontalstorecontainer");
// where "container" is the id of the container
  container.addEventListener("wheel", function (e) {
    if (e.deltaY > 0) {
      container.scrollLeft += 100;
      e.preventDefault();
// prevenDefault() will help avoid worrisome 
// inclusion of vertical scroll 
    }
    else {
      container.scrollLeft -= 100;
      e.preventDefault();
    }
  });
// That will work perfectly 

  </script>

Please note I removed images and such to simplify as they are not at all related to this question. And I’m not looking for a CSS solution. Thank you!

EDIT: something else to note, the user will never be scrolling vertically on any of the webpages. Maybe this makes the solution even easier?

EDIT2: This image shows the error I get when trying the code in the suggested answer on this post… my content still only scrolls horizontally with a vertical mousewheel when I hold down the shift key…

Answers

- Umut199akmak
- January 5, 2024 at 12:26 am
- 0 votes
0
I don’t have a mac or a trackpad so you have to test these theories but your code works with mousewheel, so only problem left is trackpad issue. Probably e.preventDefault(); prevents trackpad to scroll horizontally.
- Solution 1: If your trackpad already fires horizontal scroll events, try not preventing the event if e.deltaX has a value (different than 0).
```
    if (e.deltaX == 0) { 
    //this scroll is not horizontal
    //still prevent it and manually adjust scrollLeft
      if (e.deltaY > 0) {
        container.scrollLeft += 100;
        e.preventDefault();
      }
      else {
        container.scrollLeft -= 100;
        e.preventDefault();
      }
    }
    //else let the horizontal scroll work
```
- Solution 2: If solution 1 is not what you want, then try deleting e.preventDefault(); lines completely. You already said users will not be scrolling vertically at all, so we actually don’t need this line. If you want to make sure there will be no vertical surprises, we can try to prevent this on the html meta tags by adding
```
<head>
<meta name="viewport" content="height=device-height"/>`
</head>
```
optionally you can prevent zoom:
```
<head>
<meta name="viewport" content="height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>`
</head>
```
and we can set some style for the body element just to make sure:
```
<body style="overflow-y: hidden; height: 100vh;">
 some page content
</body>
```
this should be enough to prevent vertical scrolling without preventing it in the javascript.

EDIT:
Regarding to your comment, yes your code works for me. Guessing that you only have one horizontalstorecontainer per page, you can add the event listener to the document rather than container for better results:
```
 const container = document.getElementById("horizontalstorecontainer");
// where "container" is the id of the container
  document.addEventListener("wheel", function (e) { //edit this line <--
    if (e.deltaY > 0) {
      container.scrollLeft += 100;
      e.preventDefault();
// prevenDefault() will help avoid worrisome 
// inclusion of vertical scroll 
    }
    else {
      container.scrollLeft -= 100;
      e.preventDefault();
    }
  }, {passive: false}); //try this if you are getting my error below
```
I was getting an error Unable to preventDefault inside passive event... and adding {passive: false} solved my issue but i’m not sure if this is related to your problem or if this can break some other event/codes you might have.

This is working for me on a container that has overflow-x: scroll;. When i run this code the webpage stops scrolling and only my container scrolls horizontally with my scrollwheel. Tried this on chrome.

Maybe you can debug this event by adding console.log(e); to the beginning of function to see if the event is firing for your mousewheel and you can also see if you are getting the deltaY values you want. If the event is firing perfectly, examine container to see why it’s not moving.
Login or Signup to reply.