JavaScript Interface Challenge: Click and Drag to Scroll - #JavaScript30 27/30
Why Stack Overflow recommends it
Stack Overflow users link it as the source or starting point for drag-to-scroll code, then ask how to adapt it for vertical dragging, centering, momentum or multiple sliders.
Recommended by 0 people across 0 different months, 2019 to 2023.
What it is
Day 27 of Wes Bos's JavaScript30 series builds a click-and-drag horizontal scrolling interface in vanilla JavaScript. It walks through mousedown, mouseup, mouseleave and mousemove handlers and the offset math needed to scroll a container as the pointer moves.
What people said
Cites TJS13 · 2019-02 · Stack Overflow · on “How to center click and drag scroll at the middle”
I'm following Wes Bos 30 Days JavaScript challenge and for Day 27: Click and Drag tutorial I'm wondering how to center the slider at the middle position rather than at the first (furthest left) position? const slider = document.querySelector('.items'); let isDown = false; let startX; let scrollLeft; slider.addEventListener('mousedown', (e) => { isDown = true; slider.classList.add('active'); startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; }); slider.addEventListener('mouseleave', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mouseup', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mousemov
Cites Shruti Goel · 2020-01 · Stack Overflow · on “Dragging the screen to scroll”
I am trying to drag the screen with mouse horizontally/vertically. I am able to achieve horizontal dragging with the help of this video : [this video] . I tried the similar logic for vertical direction as well but somehow it is not working. Can someone please give some insights on what could be wrong? Or can share any other way to drag the screen vertically with mouse? This is the code logic I am using: const container = document.querySelector('#inventory'); let startY; let startX; let scrollLeft; let scrollTop; let isDown; container.addEventListener('mousedown',e => mouseIsDown(e)); container.addEventListener('mouseup',e => mouseUp(e)) container.addEventListener('mouseleave',e=>mouseLeave(e)); c
Cites Yogesh Bhatt · 2020-08 · Stack Overflow · on “How to make phone like scrolling in desktop?”
I am trying to make a set a divs to be arranged in a row inside a parent container. User should be able to drag to scroll them sideways in any of the two directions. Effect should be like how we scroll vertically in Chrome for android where swiping up adds a force to the page that makes it scroll and the force decreases with time. This should be done without scrollbars. I searched but couldn't find any result. Closest i could get was this [this video] video. But still here the scroll only worked while the mouse was moving. I want the force to decrease gradually and that too in a flexbox. Just like if you open developer tools and switch to mobile device and drag up.
Cites Jason_C · 2023-01 · Stack Overflow · on “Can't add Loop to Drag Scroll Slider without breaking the dragging functionality”
I've just followed this tutorial on Youtube to add a drag scroll to any scroll elements ( [this video] ) It worked and was extremely helpful. My only issue is I would like to apply this to multiple sliders on one page. I believe I have to create some form of 'For Loop' but I'm struggling to get anything working. Whenever I seem to add a For Loop it breaks the functionality and stops working. Heres the JS I currently have which works. var scrollSlider = document.querySelector(".scroll-slider1, .scroll-slider2"); let isDown = false; let startX; let scrollLeft; scrollSlider.addEventListener('mousedown', (e) => { e.preventDefault(); isDown = true; scrollSlider.classList.add('active'); startX = e.page