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

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

QA

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

본문

모바일 스와이프 메뉴 (가로 스크롤 메뉴)를 적용했습니다.

http://test.pushnews.io/?device=mobile

위 사이트에 적용했는데..

1번째에서 3번째 메뉴까지는 현재창에서 메뉴를 클릭 > 선택한 메뉴가 보이는데..

5번째, 6번째 메뉴 선택 시...

페이지 이동 및 메뉴 선택까지는 되는데...

화면에서 메뉴 부분이 보이질 않네요ㅠㅠㅠ

sir 모바일 사이트처럼 선택한 메뉴가 보여졌으면 좋겠는데..

이 부분은 어떻게 수정을 해줘야하는 걸까요...??

 

지금 있는 것도 

코드펜 소스 응용해서 적용한 부분이라서 

아시는 분 자세한 답변 좀 부탁드릴게요...!!!

 

2049603760_1579537725.5338.png

 

 

head.php 파일 중 해당 부분


<div class="pn-ProductNav_Wrapper">
    <?php
        $main_pg = $_SERVER['REQUEST_URI'];
        $aria = "aria-selected=";
        $a_t = "true";
        $a_f = "false";
        $aria_t = $aria.$a_t;
        $aria_f = $aria.$a_f;
        
    ?>
    <nav id="pnProductNav" class="pn-ProductNav">
        <div id="pnProductNavContents" class="pn-ProductNav_Contents">
            <a href="<?php echo $at_href['home']; ?>" <?php echo ($main_pg == '/' || $main_pg == '/?device=mobile')?$aria_t:$aria_f; ?>
                class="pn-ProductNav_Link">홈</a>
            <a href="/bbs/board.php?bo_table=board01" <?php echo ($bo_table == 'board01')?$aria_t:$aria_f; ?>
                class="pn-ProductNav_Link">증권속보</a>
            <a href="/bbs/board.php?bo_table=board04" <?php echo ($bo_table == 'board04')?$aria_t:$aria_f; ?>
                class="pn-ProductNav_Link">무료기사</a>
            <a href="/bbs/board.php?bo_table=board05" <?php echo ($bo_table == 'board05')?$aria_t:$aria_f; ?> 
                class="pn-ProductNav_Link">유료기사</a>
            <a href="/bbs/board.php?bo_table=board07" <?php echo ($bo_table == 'board07')?$aria_t:$aria_f; ?>
                class="pn-ProductNav_Link">투자정보</a>
            <a href="/bbs/board.php?bo_table=newsflash" <?php echo ($bo_table == 'newsflash')?$aria_t:$aria_f; ?>
                class="pn-ProductNav_Link">속보결과</a>
            <a href="/bbs/board.php?bo_table=board10" <?php echo ($bo_table == 'board10')?$aria_t:$aria_f; ?>
                class="pn-ProductNav_Link">종목진단</a>
            <span id="pnIndicator" class="pn-ProductNav_Indicator"></span>
        </div>
    </nav>
    <button id="pnAdvancerLeft" class="a11y-hidden" type="button">이전</button>
    <button id="pnAdvancerRight" class="a11y-hidden" type="button">다음</button>
</div>
<script src="<?php echo G5_URL ?>/thema/Miso-Company/assets/js/mobile-menu.js"></script>

 

적용한 js 파일


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 < SETTINGS.navBarTravelDistance * 2) {
            pnProductNavContents.style.transform = "translateX(" + availableScrollLeft + "px)";
        } else {
            pnProductNavContents.style.transform = "translateX(" + SETTINGS.navBarTravelDistance + "px)";
        }
        // We do want a transition (this is set in CSS) when moving so remove the class that would prevent that
        pnProductNavContents.classList.remove("pn-ProductNav_Contents-no-transition");
        // Update our settings
        SETTINGS.navBarTravelDirection = "left";
        SETTINGS.navBarTravelling = true;
    }
    // Now update the attribute in the DOM
    pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));
});
 
pnAdvancerRight.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 right
    if (determineOverflow(pnProductNavContents, pnProductNav) === "right" || determineOverflow(pnProductNavContents, pnProductNav) === "both") {
        // Get the right edge of the container and content
        var navBarRightEdge = pnProductNavContents.getBoundingClientRect().right;
        var navBarScrollerRightEdge = pnProductNav.getBoundingClientRect().right;
        // Now we know how much space we have available to scroll
        var availableScrollRight = Math.floor(navBarRightEdge - navBarScrollerRightEdge);
        // 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 (availableScrollRight < SETTINGS.navBarTravelDistance * 2) {
            pnProductNavContents.style.transform = "translateX(-" + availableScrollRight + "px)";
        } else {
            pnProductNavContents.style.transform = "translateX(-" + SETTINGS.navBarTravelDistance + "px)";
        }
        // We do want a transition (this is set in CSS) when moving so remove the class that would prevent that
        pnProductNavContents.classList.remove("pn-ProductNav_Contents-no-transition");
        // Update our settings
        SETTINGS.navBarTravelDirection = "right";
        SETTINGS.navBarTravelling = true;
    }
    // Now update the attribute in the DOM
    pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));
});
 
pnProductNavContents.addEventListener(
    "transitionend",
    function() {
        // get the value of the transform, apply that to the current scroll position (so get the scroll pos first) and then remove the transform
        var styleOfTransform = window.getComputedStyle(pnProductNavContents, null);
        var tr = styleOfTransform.getPropertyValue("-webkit-transform") || styleOfTransform.getPropertyValue("transform");
        // If there is no transition we want to default to 0 and not null
        var amount = Math.abs(parseInt(tr.split(",")[4]) || 0);
        pnProductNavContents.style.transform = "none";
        pnProductNavContents.classList.add("pn-ProductNav_Contents-no-transition");
        // Now lets set the scroll position
        if (SETTINGS.navBarTravelDirection === "left") {
            pnProductNav.scrollLeft = pnProductNav.scrollLeft - amount;
        } else {
            pnProductNav.scrollLeft = pnProductNav.scrollLeft + amount;
        }
        SETTINGS.navBarTravelling = false;
    },
    false
);
 
// Handle setting the currently active link
pnProductNavContents.addEventListener("click", function(e) {
    var links = [].slice.call(document.querySelectorAll(".pn-ProductNav_Link"));
    links.forEach(function(item) {
        item.setAttribute("aria-selected", "false");
    })
    e.target.setAttribute("aria-selected", "true");
    // Pass the clicked item and it's colour to the move indicator function
    moveIndicator(e.target, colours[links.indexOf(e.target)]);
});
 
// var count = 0;
function moveIndicator(item, color) {
    var textPosition = item.getBoundingClientRect();
    var container = pnProductNavContents.getBoundingClientRect().left;
    var distance = textPosition.left - container;
    var scroll = pnProductNavContents.scrollLeft;
    pnIndicator.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
    // count = count += 100;
    // pnIndicator.style.transform = "translateX(" + count + "px)";
    
    if (color) {
        pnIndicator.style.backgroundColor = color;
    }
}
 
function determineOverflow(content, container) {
    var containerMetrics = container.getBoundingClientRect();
    var containerMetricsRight = Math.floor(containerMetrics.right);
    var containerMetricsLeft = Math.floor(containerMetrics.left);
    var contentMetrics = content.getBoundingClientRect();
    var contentMetricsRight = Math.floor(contentMetrics.right);
    var contentMetricsLeft = Math.floor(contentMetrics.left);
    if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
        return "both";
    } else if (contentMetricsLeft < containerMetricsLeft) {
        return "left";
    } else if (contentMetricsRight > containerMetricsRight) {
        return "right";
    } else {
        return "none";
    }
}
 
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['exports'], factory);
    } else if (typeof exports !== 'undefined') {
        factory(exports);
    } else {
        factory((root.dragscroll = {}));
    }
}(this, function (exports) {
    var _window = window;
    var _document = document;
    var mousemove = 'mousemove';
    var mouseup = 'mouseup';
    var mousedown = 'mousedown';
    var EventListener = 'EventListener';
    var addEventListener = 'add'+EventListener;
    var removeEventListener = 'remove'+EventListener;
    var newScrollX, newScrollY;
 
    var dragged = [];
    var reset = function(i, el) {
        for (i = 0; i < dragged.length;) {
            el = dragged[i++];
            el = el.container || el;
            el[removeEventListener](mousedown, el.md, 0);
            _window[removeEventListener](mouseup, el.mu, 0);
            _window[removeEventListener](mousemove, el.mm, 0);
        }
 
        // cloning into array since HTMLCollection is updated dynamically
        dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));
        for (i = 0; i < dragged.length;) {
            (function(el, lastClientX, lastClientY, pushed, scroller, cont){
                (cont = el.container || el)[addEventListener](
                    mousedown,
                    cont.md = function(e) {
                        if (!el.hasAttribute('nochilddrag') ||
                            _document.elementFromPoint(
                                e.pageX, e.pageY
                            ) == cont
                        ) {
                            pushed = 1;
                            lastClientX = e.clientX;
                            lastClientY = e.clientY;
 
                            e.preventDefault();
                        }
                    }, 0
                );
 
                _window[addEventListener](
                    mouseup, cont.mu = function() {pushed = 0;}, 0
                );
 
                _window[addEventListener](
                    mousemove,
                    cont.mm = function(e) {
                        if (pushed) {
                            (scroller = el.scroller||el).scrollLeft -=
                                newScrollX = (- lastClientX + (lastClientX=e.clientX));
                            scroller.scrollTop -=
                                newScrollY = (- lastClientY + (lastClientY=e.clientY));
                            if (el == _document.body) {
                                (scroller = _document.documentElement).scrollLeft -= newScrollX;
                                scroller.scrollTop -= newScrollY;
                            }
                        }
                    }, 0
                );
             })(dragged[i++]);
        }
    }
 
      
    if (_document.readyState == 'complete') {
        reset();
    } else {
        _window[addEventListener]('load', reset, 0);
    }
 
    exports.reset = reset;
}));

 

새로고침(페이지 이동)이 아닐 때에는

선택한 메뉴와 위치 그대로 보여지는데 ..

새로고침(페이지 이동)을 하니깐...

스크롤 포지션 값이 초기화가 되버려요ㅠㅠ

위 js 소스 중에서


if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
        return "both";
    } else if (contentMetricsLeft < containerMetricsLeft) {
        return "left";
    } else if (contentMetricsRight > containerMetricsRight) {
        return "right";
    } else {
        return "none";
    }

이 부분인 거 같아서 이것저것 해봤는데..

바뀌질 않네요ㅠㅠㅠ

아시는 분 계시면 꼭 좀 도와주세요ㅠㅠ

 

혹시나 다른 sir 모바일 사이트와 같은메뉴 형식 참고 소스가 있다면

공유 부탁드려요...!!

 

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
전체 30
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT