economy/wwwroot/js/site.js

// Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.

// Write your JavaScript code.

class NavMenu {
    constructor() {
        this.$menu = document.getElementById("navMenu");
        this.isDown = false;
        this.startX = 0;
        this.scrollLeft = 0;

        this.setEvent();
    }

    setEvent() {
        this.$menu.addEventListener('mousedown', (e) => this.mouseDown(e));
        this.$menu.addEventListener('mouseleave', () => this.mouseLeave());
        this.$menu.addEventListener('mouseup', () => this.mouseUp());
        this.$menu.addEventListener('mousemove', (e) => this.mouseMove(e));
        this.$menu.addEventListener('wheel', (e) => this.mouseWheel(e));   
    }

    mouseWheel(e) {
        e.preventDefault(); // 기본 휠 스크롤 동작을 방지
        this.$menu.scrollLeft += (e.deltaY * 2); // 휠 속도 조정
    }

    mouseDown(e) {
        this.isDown = true;
        this.$menu.classList.add('active');
        this.startX = (e.pageX - this.$menu.offsetLeft);
        this.scrollLeft = this.$menu.scrollLeft;
    }

    mouseLeave() {
        this.isDown = false;
        this.$menu.classList.remove('active');
    }

    mouseUp() {
        this.isDown = false;
        this.$menu.classList.remove('active');
    }

    mouseMove(e) {
        if (!this.isDown) {
            return;
        }

        e.preventDefault();
        const x = (e.pageX - this.$menu.offsetLeft);
        const walk = ((x - this.startX) * 3); // 스크롤 속도 조정
        this.$menu.scrollLeft = (this.scrollLeft - walk);
    }
}

const navMenu = new NavMenu();

$(function () {
    const dropdownElementList = document.querySelectorAll('.dropdown-toggle');
    const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl));
});