- Wes Bos Youtube Tutorial: JavaScript Interface Challenge: Click and Drag to Scroll - #JavaScript30 27/30.
- Note: to open web links in a new window use: ctrl+click on link
- Tutorial Code to scroll horizontally using click and drag.
- Open
index.html
in browser. If any code is changed the browser needs to be refreshed.
- calculate slider scroll left value from cursor position
slider.addEventListener('mousemove', (e) => {
if (!isDown) return; //stop the function from running
console.log(isDown);
e.preventDefault(); // prevent selection of text etc inside area.
const x = e.pageX - slider.offsetLeft;
const scrollMultiple = 3; // scroll 3 pixels for each pixel moved by the mouse.
const walk = (x - startX)*scrollMultiple;
slider.scrollLeft = scrollLeft - walk;
console.log('slider scrollleft', slider.scrollLeft); //max value 4207.2001953125
});
- Scroll speed can be changed.
- Status: Working
- To-Do: Nothing
- Wes Bos Youtube Tutorial: JavaScript Interface Challenge: Click and Drag to Scroll - #JavaScript30 27/30.
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: gomezbateman@yahoo.com