모바일 스와이프 메뉴(가로 스크롤 메뉴) 도와주세요ㅠㅠ 채택완료

var SETTINGS = {

    navBarTravelling: false,

    navBarTravelDirection: "",

     navBarTravelDistance: 150

}

 

var colours = {

    0: "#ce141c",

    1: "#ce141c",

    2: "#ce141c",

    3: "#ce141c",

    4: "#ce141c",

    5: "#ce141c",

    6: "#ce141c",

    7: "#ce141c",

    8: "#ce141c",

    9: "#ce141c",

    10: "#00B27A",

    11: "#996B3D",

    12: "#CC7014",

    13: "#40FF8C",

    14: "#FF3400",

    15: "#ECBB5E",

    16: "#ECBB0C",

    17: "#B9D912",

    18: "#253A93",

    19: "#125FB9",

}

 

document.documentElement.classList.remove("no-js");

document.documentElement.classList.add("js");

 

// Out advancer buttons

var pnAdvancerLeft = document.getElementById("pnAdvancerLeft");

var pnAdvancerRight = document.getElementById("pnAdvancerRight");

// the indicator

var pnIndicator = document.getElementById("pnIndicator");

 

var pnProductNav = document.getElementById("pnProductNav");

var pnProductNavContents = document.getElementById("pnProductNavContents");

 

pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));

 

// Set the indicator

moveIndicator(pnProductNav.querySelector("[aria-selected=\"true\"]"), colours[0]);

 

// Handle the scroll of the horizontal container

var last_known_scroll_position = 0;

var ticking = false;

 

function doSomething(scroll_pos) {

    pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));

}

 

pnProductNav.addEventListener("scroll", function() {

    last_known_scroll_position = window.scrollY;

    if (!ticking) {

        window.requestAnimationFrame(function() {

            doSomething(last_known_scroll_position);

            ticking = false;

        });

    }

    ticking = true;

});



 

pnAdvancerLeft.addEventListener("click", function() {

    // If in the middle of a move return

    if (SETTINGS.navBarTravelling === true) {

        return;

    }

    // If we have content overflowing both sides or on the left

    if (determineOverflow(pnProductNavContents, pnProductNav) === "left" || determineOverflow(pnProductNavContents, pnProductNav) === "both") {

        // Find how far this panel has been scrolled

        var availableScrollLeft = pnProductNav.scrollLeft;

        // If the space available is less than two lots of our desired distance, just move the whole amount

        // otherwise, move by the amount in the settings

        if (availableScrollLeft 

if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight