⚡ Javascript Click Drag

• 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

📄 Table of contents

• ⚡ Javascript Click Drag
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Tutorial Code to scroll horizontally using click and drag.

📷 Screenshots

.

📶 Technologies

• Javascript v1.9 ECMA-262 ECMAScript 2018

💾 Setup

• Open index.html in browser. If any code is changed the browser needs to be refreshed.

💻 Code Examples

• 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
});

🆒 Features

• Scroll speed can be changed.

📋 Status & To-Do List

• Status: Working
• To-Do: Nothing

👏 Inspiration

• Wes Bos Youtube Tutorial: JavaScript Interface Challenge: Click and Drag to Scroll - #JavaScript30 27/30.

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com