| 1 |
export default function TabsDragScroll() { |
| 2 |
// Selectors and DOM elements |
| 3 |
const TabsDragScroll = document.querySelector('.TabsDragScroll'); |
| 4 |
if (!TabsDragScroll) return; |
| 5 |
|
| 6 |
const tabMenu = TabsDragScroll.querySelector('ul'); |
| 7 |
|
| 8 |
// Dragging functionality |
| 9 |
let activeDrag = false; |
| 10 |
tabMenu.addEventListener('mousemove', (event) => { |
| 11 |
if (!activeDrag) return; |
| 12 |
tabMenu.scrollLeft -= event.movementX; |
| 13 |
// iconVisibility(); |
| 14 |
tabMenu.classList.add('dragging'); |
| 15 |
}); |
| 16 |
document.addEventListener('mouseup', () => { |
| 17 |
activeDrag = false; |
| 18 |
tabMenu.classList.remove('dragging'); |
| 19 |
}); |
| 20 |
tabMenu.addEventListener('mousedown', () => { |
| 21 |
activeDrag = true; |
| 22 |
}); |
| 23 |
|
| 24 |
// Scroll to <li> on click |
| 25 |
const scrollToLi = (li) => { |
| 26 |
const liLeft = li.offsetLeft; |
| 27 |
const liWidth = li.offsetWidth; |
| 28 |
const tabCenter = (tabMenu.clientWidth / 2) - (liWidth / 2); |
| 29 |
|
| 30 |
tabMenu.scrollTo({ |
| 31 |
left: liLeft - tabCenter, |
| 32 |
behavior: 'smooth', |
| 33 |
}); |
| 34 |
}; |
| 35 |
|
| 36 |
// Add click event listeners to all <li> elements |
| 37 |
tabMenu.querySelectorAll('li').forEach((li) => { |
| 38 |
li.addEventListener('click', () => scrollToLi(li)); |
| 39 |
}); |
| 40 |
} |
| 41 |
|
