如何禁用向左滚动？

Question

I got a div element (" #parent ") that includes multiple child elements (" .item "). I want to enable scrolling the parent element just in one direction (left OR right). Otherwise nothing should happen.

---

See my code:

 $("#parent").scroll(function() { // >>> scroll event // >>> console.log("SCROLLED " + new Date().getMilliseconds()) }) 

 #container { position: absolute; width: 100%; height: 100%; } #parent { position: relative; width: 90%; height: 40%; overflow-y: hidden; overflow-x: scroll; white-space: nowrap; background: red; } .child { display: inline-block; position: relative; margin-left: 3%; width: 40px; height: 40px; background: gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> <div class="child">10</div> <div class="child">12</div> <div class="child">13</div> <div class="child">14</div> <div class="child">15</div> <div class="child">16</div> <div class="child">17</div> <div class="child">18</div> <div class="child">19</div> <div class="child">20</div> </div> </div> 

---

So to my question: I'd like to disable scrolling the element to the right hand side (backwards). I'd like to just enable the scroll of the items to the left hand side (forward).

How can I use jQuery to implement this method? Any help would be very appreciated. Thanks in advance!

Answer 1

The following code should do the job ¹ .

previousX stores the last position that the element was scrolled to on the X axis.

When the scroll event triggers, newX is set to the scrollLeft() value (this returns how far the element has been scrolled from it's left-most side, in pixels).

• If this value is greater than previousX , then they have scrolled to the right, so we allow the scroll, and update previousX to the new x value.

• If the value is lesser than previousX , they have scrolled to the right - so we need to cancel the scroll. To do this, we can use the scrollLeft() function again - but this time, we provide a value to it - this allows us to set the scroll position; rather than retrieve it. By setting it to previousX , we can prevent the scroll.

• Note that if the value is equal , we do nothing.

 let previousX = -1; $("#parent").scroll(function(e){ let newX = $("#parent").scrollLeft(); if (newX>previousX) { previousX = newX; } else if (newX<previousX) { $("#parent").scrollLeft(previousX); } }) 

 #container { position: absolute; width: 100%; height: 100%; overflow:hidden; } #parent { position: relative; width: 90%; height: 40%; overflow-y: hidden; overflow-x: scroll; white-space: nowrap; background: red; } .child { display: inline-block; position: relative; margin-left: 3%; width: 40px; height: 40px; background: gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> <div class="child">10</div> <div class="child">12</div> <div class="child">13</div> <div class="child">14</div> <div class="child">15</div> <div class="child">16</div> <div class="child">17</div> <div class="child">18</div> <div class="child">19</div> <div class="child">20</div> </div> </div> 

---

¹ : Unfortunately, it doesn't seem to work at all when I use it with my Magic Trackpad - but when dragging the scroll bars it works just fine. I haven't tested it on a touch-screen device / Windows / using a proper mouse & scroll wheel, so I don't know how it behaves in those cases either. It would definitely be worth you doing some proper testing / improving this code, as it probably will not work in all cases, or even catch all possible scroll events.