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!!!
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.
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. :)
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...
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 ..
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?
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.
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 :)
@@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.
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.
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!!!
when i got to console.log(walk) - i was like 'WOOOOW HOW COOL IS THAT'.
it was so rewarding in emotional point.
thank you for sharing your knowlege!
Hi wes, i just landed here and it works like a charm. Im preparing an angular 17 app and i adapted your code. Thanks for the tutorial, i lorn a lot!
Awesome tutorial man! wish you also covered the tag part of the cards. Since it kind of breaks it.
thank you a lot for this!
i've been struggling to implement this on react and your way of explaining really made everything so much easy.
Same
i was struggling to get the math right and this simplyfied my task so much, thank you!!!
this saved me thanks! I translated it in react using useEffect and useRef
Super helpful! thank you for breaking this down the way you did!
Thank you so much for these videos and blog posts Wes, I really enjoy them not being so damn nerdy and dry.
it really helped me to understand the concept. it works perfectly in desktop view but do not know why it is not working in responsive view.
This is awesome, was looking for this exactly. Thanks
You're great, thanks for this masterpiece
Great video! Can we also find the source code in Github or somewhere else?
Great tutorial. I´ve implement this using touch events
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.
dude can you please share css of this??
around 8:00, you subtracted the offsetleft value from pageX, can you explain why
We can reduce the code by using `slider.scrollLeft += -e.movementX * 3` instead.
Amazing tutorial WesBos. Please keep it up.
the job that made you +1 follower in 2020.
Cool, BTW, could I use with scroll snap? I tried mouse scroll will be conflict with scroll snap,,,, it won't scroll smooth but jumpy
you saved my life !
Thank you Mr. Wes Bos!!
nice, that's really what i want, thank you buddy, keep it up 👍👌
Bos is Boss. each and every single time.
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. :)
you make it very simple , thank you
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...
You're the best man
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 ..
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
How do you make the scrollbar o when not scrolling?
thanks dude i was almost looking for the same tut
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?
It doesn't work with IE11
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.
i am getting scrollLeft as 0 everytime. Anyidea whyand what i should do?
where do you get the css for it ?
what text editor do you use,your workflow is perfect
kingwindie Visual Studio Code. It's free.
please, can you do one for a vertical div..and also show the css file
Check my comment, i have one example at codepen with both scrolls working
@@Gutto_o Thank you for the codepen!
@@Gutto_o can we do this add the second new class same a function
why margin on first number item not same with the last item ? the first item more space in its margin than last..
it follows a link after its block was dragged. how to prevent that?
Thank Bro. I did. Very helpful
really helpfull
finnaly something good
It will be nice if you can add as a plus an infinite drag.
Why not just use MouseEvent.movementX
?
Thank You very muchh.. I appreciate your work
Thankyou so much ❤
Nice vide obrah
Can u please share the css?
how to add touch events to this ?
Muchas Gracias 👍👍
can you make this scroll to loop, i mean continuous scroll
Why i always got scroll left value 0
Thanks bro!
wes bos you just saved my ass ......
Gracias.
share the css please
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 :)
Mine does work with the finger on phone or tablet. But it doesn't work when I use my mouse on desktop unless I have the console opened. :/
does it work on touch phone using mousedown, and mousemove ?
@@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.
thanks a lot ,, im using this in vue js,, anyone who wish the same let me know!
yes please!
Thank you.
can't get it to work for me :/ not sure if anyone is available to help me out?
font name?
can any one explain to me about the srollLeft how could we add a variable to an element and it moves
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.
The Element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled from its left edge.
I didn't get it please can anyone help me
3:19 js
nice intro
im ontario too
i need the coding for this
I can't do it in ReactJs xD T.T
hey, put the source code please
That's one horrible font you got for comments 0_o what's it called?
The theme itself is called Cobalt2
Please post the code mate
Its like a crime to post a coding tutorial without a link to the full code
And this thing scrolls wrong way
@@MW3GlitchSA I am struggling with css can you share your css?
@@bigk2367 I use Bootstrap studio to auto generate all css
Kimi
Yrr
omg
neither you showed the css and nor the code, whats the point of making videos like that?