Thanks so much! I created such a page with touch events, but most of the people visting the page were on desktop, so i needed to add the drag functionality as fast as I could. You saved my life!!!
Hi Wes thank you so much for this awesome screencast. by the way how could i achieve the same resut with my scroll wheel ? i am able to drag to scroll but not able to use my mouse wheel for this horizontal layout items ..
Why does it not work if you have two of these .items sections beloweach other?!??????? I want two scrollable bars on the same page but only the opper one work with the click and drag effect.
Thank you so much!!! Just to add, I needed to add a preventDefault to my mousedown event listener too, due to it sometimes not properly seeing the mouseup event otherwise.
Thanks for nice video. By the way I found little issue with scrolling. [inside "mousemove" function] after assigning "slider.scrollLeft = slider.scrollLeft - walk" you have to re-assign "startX = e.pageX - slider.offsetLeft" then scrolling works smoothly
sir can you plz tell me why at the end we need to subtract walk from scrollLeft?...I am a bit confused with this. How do you figured out that you have to subtract the walk from scrollLeft?
Nice. I did the same thing with movementX. It tracks the previous and current x offset and calculates the difference for you. scrollContainer.addEventListener('mousemove', function(e){ if(isDragging){ e.preventDefault(); scrollContainer.scrollLeft -= e.movementX; } }); May be helpful for someone...
Hey Wes! I wanted to share a tip and that is you can do this with only using the `mousemove` event. By checking event.buttons, you can know if the mouse is pressed, that makes mousedown, mouseup and mouseleave obsolete. To calculate how far to move you can store previous event and compare the previous with current events `clientX` property. Then you can get away with only this: ``` let prevEvent; scrollable.addEventListener('mousemove', event => { if (event.buttons === 1) { scrollable.scrollLeft -= event.clientX - prevEvent.clientX; } prevEvent = event; }); ```
Gotta backpedal here a little. Turns out macOS doesn't have an API for button presses so this doesn't work on Safari, so pretty bad advice from me. Always learning. :)
Hi there, thank you for that great Tutorial! I just wondered how I could do it to always scroll a specific amount on scroll. So exactly one element is in frame. I figured to check wether the scroll was positive or negative, and that works, but how could I animated the new set scrollLeft property?
Disclaimer: this will not actually answer your question but if you need to do it for a project there’s a cool little js library called Swiper that does all that for u and it’s super easy, you can set slidesPerView at breakpoints and cool swipe effects :)
scrollLeft is property not just variable, it shows how much element is scrolled from left side. maybe variable name should be changed to scrolledPart to avoid confusion.
@@uzair004 It works on my phone if I drag with my finger, but I don't need to do all of this for that. However, the mouse-drag part doesn't work on the computer, I need to use the horizontal scroll bar.
