Saturday

horizontally scrolling div won't scroll using mouse wheel

2:04 PM css, html, javascript, jquery No comments

Issue

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...

Solution

I have made few correction on your code you provide in jsfiddle.

Your script to scroll the content is before <body> and you have document.getElementById("horizontalstorecontainer"); in that script. It will not find your div with id "horizontalstorecontainer", because your js is loaded before DOM load.
Similarly, you are doing container.scrollLeft += 100;. Here,container is a div with horizontalstorecontainer. Which does not have scrollbar, the scroll bar is in <div class="store-scrolling-wrapper">. So, the scrollLeft doesnot work. See following image.

So, I did following changes to make your code working.

const itemToScroll = document.getElementById("itemToScroll"); stored div that has scrollbar to a itemToScroll. Note: I have added id to <div id="itemToScroll" class="store-scrolling-wrapper">
if (Math.abs(e.deltaY) > 0) checked deltaY value is greater than 0 or not. If it is grater than 0 then it is vertical scroll. Why Math.abs() because scroll up will return negative deltaY.
e.preventDefault(); if it is vertical scroll. So that it will disable the default behaivour and we can override it with horizontal scroll.

^{*_{Note: Add your JavaScript to scroll at the button of page.}}

const container = document.getElementById("horizontalstorecontainer");
const itemToScroll = document.getElementById("itemToScroll");

container.addEventListener("wheel", function(e) {
  if (Math.abs(e.deltaY) > 0) {
    e.preventDefault();
    itemToScroll.scrollLeft +=e.deltaY;
    
    // itemToScroll.scrollTo({
    //  left: itemToScroll.scrollLeft + e.deltaY,
    // });
  }
});

body {
  background: black !important;
}

 ::-webkit-scrollbar {
  height: 1vh;
}

 ::-webkit-scrollbar-track {
  background: transparent;
}

 ::-webkit-scrollbar-thumb {
  background: white;
}

 ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

.front {
  margin: 0 auto;
  visibility: hidden;
  position: relative;
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  -webkit-animation: swag 5s infinite;
  -moz-animation: swag 5s infinite;
  -o-animation: swag 5s infinite;
  animation: swag 5s infinite;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 1px solid transparent;
}

.back {
  margin: 0 auto;
  position: absolute;
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  -webkit-animation: love 5s infinite;
  -moz-animation: love 5s infinite;
  -o-animation: love 5s infinite;
  animation: love 5s infinite;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 1px solid transparent;
}

#horizontalstorecontainer {
  z-index: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.clothingcardfirst {
  display: inline-block;
  position: relative;
  height: 60%;
  width: 35%;
  top: 50.6%;
  transform: translateY(-50%);
  margin-right: 32.5%;
}

.clothingcard1 img,
.clothingcard2 img,
.cardlast img,
.cardlast2022 img,
.cardlast2021 img,
.cardlast2020 img,
.clothingcardlast img,
.clothingcardfirst img {
  height: 100%;
}

.animationwrapperclothing {
  height: calc(100% - 66.4px);
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  -o-perspective: 2000px;
  perspective: 2000px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.store-scrolling-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: center;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}

.store-scrolling-wrapper-clothing {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: center;
  margin: 0 auto;
  height: 60%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}

.cardlast {
  display: inline-block;
  position: relative;
  height: 60%;
  width: 35%;
  top: 50.6%;
  transform: translateY(-50%);
  animation-name: storeslide;
  animation-duration: 1.5s;
  animation-delay: .3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  -webkit-animation-name: storeslide;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-delay: .3s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -moz-animation-name: storeslide;
  -moz-animation-duration: 1.5s;
  -moz-animation-delay: .3s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -o-animation-name: storeslide;
  -o-animation-duration: 1.5s;
  -o-animation-delay: .3s;
  -o-animation-timing-function: ease-in-out;
  -o-animation-fill-mode: both;
}

.productwrapperclothing {
  top: 0;
  width: 100%;
  display: inline-block;
  height: calc(100% - 42px);
}

.cardlast img {
  height: 100%;
}

.animationwrapper {
  display: inline-block;
  height: calc(100% - 66.4px);
  -webkit-perspective: 2400px;
  -moz-perspective: 2400px;
  -ms-perspective: 2400px;
  -o-perspective: 2400px;
  perspective: 2400px;
}

.animationwrapperless {
  display: inline-block;
  height: calc(100% - 66.4px);
  -webkit-perspective: 3000px;
  -moz-perspective: 3000px;
  -ms-perspective: 3000px;
  -o-perspective: 3000px;
  perspective: 3000px;
}

.anotherwrapperlol {
  display: inline-block;
  height: calc(100% - 66.4px);
}

@keyframes storeslide {
  0% {
    margin-left: -535%;
  }
  100% {
    margin-left: 32.5%;
  }
}

.animationwrapperclothing {
  height: calc(100% - 66.4px);
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  -o-perspective: 2000px;
  perspective: 2000px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.animationwrapperclothing>a {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.productwrapper {
  top: 0;
  width: 100%;
  display: inline-block;
  height: calc(100% - 42px);
}

.productwrapperclothing {
  top: 0;
  width: 100%;
  display: inline-block;
  height: calc(100% - 42px);
}

.productwrapperclothing {
  padding: 0;
}

.animationwrapper {
  display: inline-block;
  height: calc(100% - 66.4px);
  -webkit-perspective: 2400px;
  -moz-perspective: 2400px;
  -ms-perspective: 2400px;
  -o-perspective: 2400px;
  perspective: 2400px;
}

.itemandpricewrapper,
.itemandpricewrapperclothing {
  position: fixed;
  width: 100%;
  bottom: 42px;
  margin: 0 auto;
  right: 0;
  left: 0;
}

.animationwrapperless {
  display: inline-block;
  height: calc(100% - 66.4px);
  -webkit-perspective: 3000px;
  -moz-perspective: 3000px;
  -ms-perspective: 3000px;
  -o-perspective: 3000px;
  perspective: 3000px;
}

.clothing {
  margin: 0 auto;
  position: relative;
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  bottom: 0;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 1px solid transparent;
}

.clothingcard2 {
  display: inline-block;
  position: relative;
  height: 60%;
  width: 35%;
  top: 50.6%;
  transform: translateY(-50%);
}

.clothingcard1 img,
.clothingcard2 img,
.cardlast img,
.cardlast2022 img,
.cardlast2021 img,
.cardlast2020 img,
.clothingcardlast img,
.clothingcardfirst img {
  height: 100%;
}

.itemandpricewrapper>a,
.itemandpricewrapperclothing>a {
  display: inline-block;
  list-style: none;
  text-decoration: none;
}

h1 {
  font-family: neue-haas-grotesk-text, sans-serif;
  color: white;
  font-weight: 500;
  font-style: normal;
  list-style: none;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
}

h2 {
  font-family: neue-haas-grotesk-text, sans-serif;
  color: #7e7e7e;
  font-weight: 500;
  font-style: normal;
  list-style: none;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  margin-top: -4px;
}

#collagebutton,
#inkbutton,
#crossbutton,
#crossbutton2,
#streakbutton,
#thermalbutton,
#databendbutton,
#trilogybutton,
#temperaturebutton,
#crosscollectorsbutton,
#streakcollectorsbutton,
#temperaturecollectorsbutton,
#phaserblackbutton,
#phaserwhitebutton,
#embroideredlogohoodieblackbutton,
#atrbutton,
#atrvhsbutton,
#articlebutton,
#lolbutton,
#lollbutton,
#lolllbutton,
#gesturemorn,
#roonhood,
#smallpaint,
#bigpaint,
#thegesturebutton,
#mediumpaint,
#d8,
#bb,
#brb,
#sb,
#charhood,
#fghood,
#whood,
#rbhood,
#ana,
#whydontyouwork,
#pig,
#met,
#mett,
#unc,
#cs,
#cs2,
#cs3,
#cs4,
#cs5,
#cs6,
#cs7,
#cs8,
#cs9,
#cs10,
#cs11,
#cs12,
#cs13,
#cs14,
#cs15,
#philly1,
#philly2,
#philly3,
#holy,
#holyu,
#font,
#cwb,
#cw,
#cwu,
#gjh,
#bf1,
#bf2,
#bf3 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
}

.deckcard2,
.deckcard3 {
  display: inline-block;
  position: relative;
  height: 60%;
  width: 35%;
  top: 50.6%;
  transform: translateY(-50%);
}

.deckcard1 img,
.storecard img,
.deckcard2 img,
.deckcard3 img,
.deckcard0 img {
  height: 100%;
}

@media screen and (orientation: portrait) {
  .cardlast {
    animation-name: storeslidemobile;
    animation-duration: 1.5s;
    animation-delay: .3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    -webkit-animation-name: storeslidemobile;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-delay: .3s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    -moz-animation-name: storeslidemobile;
    -moz-animation-duration: 1.5s;
    -moz-animation-delay: .3s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-fill-mode: both;
    -o-animation-name: storeslidemobile;
    -o-animation-duration: 1.5s;
    -o-animation-delay: .3s;
    -o-animation-timing-function: ease-in-out;
    -o-animation-fill-mode: both;
  }
  .productwrapperclothing {
    padding: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.typekit.net/lzh8cbl.css" rel="stylesheet" />
<div id="horizontalstorecontainer">
  <div id="itemToScroll" class="store-scrolling-wrapper">
    <div class="cardlast">
      <div class="productwrapper">
        <a href="/" class="animationwrapper">
          <img src="images/" alt="." class="back" />
          <img src="images/" alt="." class="front" />
        </a>
        <div class="itemandpricewrapper">
          <a href="/">
            <h1>TEST</h1>
          </a>
          <h2>$ ??.??</h2>
        </div>
      </div>
      <div id="cw">
        <script type="text/javascript">
        </script>
      </div>
    </div>
    <div class="deckcard3">
      <div class="productwrapper">
        <a href="/" class="animationwrapperless">
          <img src="images/" alt="." class="back" />
          <img src="images/" alt="." class="front" />
        </a>
        <div class="itemandpricewrapper">
          <a href="/">
            <h1>TEST</h1>
          </a>
          <h2>$ ??.??</h2>
        </div>
      </div>
      <div id="cwu">
        <script type="text/javascript">
        </script>
      </div>
    </div>
    <div class="deckcard3">
      <div class="productwrapper">
        <a href="/" class="animationwrapper">
          <img src="images/" alt="." class="back" />
          <img src="images/" alt="." class="front" />
        </a>
        <div class="itemandpricewrapper">
          <a href="/">
            <h1>TEST</h1>
          </a>
          <h2>$ ??.??</h2>
        </div>
      </div>
      <div id="font">
        <script type="text/javascript">
        </script>
      </div>
    </div>
    <div class="deckcard3">
      <div class="productwrapper">
        <a href="/" class="animationwrapperless">
          <img src="images/" alt="." class="back" />
          <img src="images/" alt="." class="front" />
        </a>
        <div class="itemandpricewrapper">
          <a href="/">
            <h1>TESTT</h1>
          </a>
          <h2>$ ??.??</h2>
        </div>
      </div>
      <div id="holyu">
        <script type="text/javascript">
        </script>
      </div>
    </div>
    <div class="deckcard3">
      <div class="productwrapper">
        <a href="/" class="animationwrapper">
          <img src="images/" alt="." class="back" />
          <img src="images/" alt="." class="front" />
        </a>
        <div class="itemandpricewrapper">
          <a href="/">
            <h1>TEST</h1>
          </a>
          <h2>$ ??.??</h2>
        </div>
      </div>
      <div id="cs3">
        <script type="text/javascript">
        </script>
      </div>
    </div>
    <div class="deckcard3">
      <div class="productwrapper">
        <a href="/" class="animationwrapperless">
          <img src="images/" alt="." class="back" />
          <img src="images/" alt="." class="front" />
        </a>
        <div class="itemandpricewrapper">
          <a href="/">
            <h1>TEST</h1>
          </a>
          <h2>$ ??.??</h2>
        </div>
      </div>
      <div id="cs4">
        <script type="text/javascript">
        </script>
      </div>
    </div>
    <div class="clothingcard2">
      <div class="productwrapperclothing">
        <div class="animationwrapperclothing">
          <a href="/">
            <img src="images/" alt="." class="clothing" />
          </a>
        </div>
        <div class="itemandpricewrapperclothing">
          <a href="/">
            <h1>TEST</h1>
          </a>
          <h2>$ ??.??</h2>
        </div>
      </div>
      <div id="streakbutton">
        <script type="text/javascript">
        </script>
      </div>
    </div>
    <div class="deckcard3">
      <div class="productwrapper">
        <a href="/" class="animationwrapperless">
          <img src="images/" alt="." class="back" />
          <img src="images/" alt="." class="front" />
        </a>
        <div class="itemandpricewrapper">
          <a href="/">
            <h1>TEST</h1>
          </a>
          <h2>$ ??.??</h2>
        </div>
      </div>
      <div id="cs5">
        <script type="text/javascript">
        </script>
      </div>
    </div>
    <div class="clothingcard2">
      <div class="productwrapperclothing">
        <div class="animationwrapperclothing">
          <a href="/">
            <img src="images/" alt="." class="clothing" />
          </a>
        </div>
        <div class="itemandpricewrapper">
          <a href="/">
            <h1>TEST</h1>
          </a>
          <h2>$ ??.??</h2>
        </div>
      </div>
      <div id="philly2">
        <script type="text/javascript">
        </script>
      </div>
    </div>
    <div class="clothingcard2">
      <div class="productwrapperclothing">
        <div class="animationwrapperclothing">
          <a href="/">
            <img src="images/" alt="." class="clothing" />
          </a>
        </div>
        <div class="itemandpricewrapper">
          <a href="/">
            <h1>TEST</h1>
          </a>
          <h2>$ ??.??</h2>
        </div>
      </div>
      <div id="philly3">
        <script type="text/javascript">
        </script>
      </div>
    </div>
    <div class="clothingcardfirst">
      <div class="productwrapperclothing">
        <div class="animationwrapperclothing">
          <a href="/">
            <img src="images/" alt="." class="clothing" />
          </a>
        </div>
        <div class="itemandpricewrapper">
          <a href="/">
            <h1>TEST</h1>
          </a>
          <h2>$ ??.??</h2>
        </div>
      </div>
      <div id="cs">
        <script type="text/javascript">
        </script>
      </div>
    </div>
  </div>
</div>

Link to updated jsfiddle.

Answered By - Kiran Shahi

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Saturday

horizontally scrolling div won't scroll using mouse wheel

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels