모바일 레이아웃 가로 스크롤 이동하기

모바일 레이아웃에서 메뉴를 가로 스크롤로 구현했습니다.

모바일 브라우저 가로를 벗어나는 경우에 해당 메뉴로 진입했을 경우 해당 메뉴가 화면에 보이게끔 작업해보았습니다.

JS

function gnb(){
   let position = $(".gnb-bar").find(".on").offset().left - 100,
      gnb =  $(".gnb-bar").find(".depth2")
   if(position>=$(window).width()-200){
      gnb.scrollLeft(position);  
   }  
}
function lnb(){
   let target = $(".lnb-bar").find(".on");
   if(target.length==1){
      let position = $(".lnb-bar").find(".on").offset().left - 100,
         lnb =  $(".lnb-bar").find(".depth3")
      if(position>=$(window).width()-200){
         lnb.scrollLeft(position);
      }  
   }  
}

on 클래스를 찾아서 해당 부모 요소의 스크롤값을 제이쿼리로 이동시켜주는 코드입니다.

HTML

      <div class="gnb-bar">
   <!--@if($mid=='index' || $mid=='about')-->
   <ul>
              <li class="on"|cond="$mid=='index' || $mid=='about'"><a href="/index">홈</a></li>
              <li class="on"|cond="$mid=='talks'"><a href="/talks">커뮤니티</a></li>
              <li class="on"|cond="$mid=='shop'"><a href="/shop">포인트마켓</a></li>
              <li class="on"|cond="$mid=='tip'"><a href="/tip">웹디벨로퍼</a></li>
              <li class="on"|cond="$mid=='order'"><a href="/order">제작의뢰</a></li>
              <li class="on"|cond="$mid=='portfolio'"><a href="/portfolio">포트폴리오</a></li>
   </ul>
      <!--@elseif($mid=='cs')-->
      <!--@else-->
      <block loop="$main_menu->list => $key1, $val1" cond="$val1['selected']">
         <ul cond="$val1['list']" class="depth2">
            <li loop="$val1['list'] => $key2, $val2" class="on"|cond="$val2['selected']">
               <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window'] == 'Y'"><span>{$val2['link']}</span></a>
               <ul cond="$val2['list']" class="depth3" style="display:none;">
                  <li loop="$val2['list'] => $key3, $val3">
                     <a href="{$val3['href']}" target="_blank"|cond="$val3['open_window'] == 'Y'"><span>{@preg_replace("/\s+/", "", $val3['link']);}{$val3['link']}</span></a>
                  </li>
               </ul>
            </li>
         </ul>
      </block>
      <!--@end-->
      </div>
<div class="lnb-bar">
   <block loop="$main_menu->list => $key1, $val1" cond="$val1['selected']">
      
         <block loop="$val1['list'] => $key2, $val2" cond="$val2['selected']">
            <ul cond="$val2['list']" class="depth3">
               <li loop="$val2['list'] => $key3, $val3" class="on move"|cond="$val3['selected']">
                  <a href="{$val3['href']}" target="_blank"|cond="$val3['open_window'] == 'Y'"><span>#{preg_replace("/\s+/", "", $val3['link'])}</span></a>
               </li>
            </ul>
         </block>
      
   </block>
</div>

참조

https://debugdaldal.tistory.com/143

https://webisfree.com/2019-08-13/[jquery]-scrollleft()-method-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9C%84%EC%B9%98-%EC%A2%8C%EC%9A%B0-%EC%9D%B4%EB%8F%99%ED%95%98%EA%B8%B0

https://bbol-world.tistory.com/118