클릭 시 원하는 위치로 스크롤링 되기

클릭 시 원하는 위치로 스크롤링 되기

QA

클릭 시 원하는 위치로 스크롤링 되기

본문

모달창 안에서

좌측 메뉴를 클릭했을때 우측의 스크롤이 해당 위치의 맨 윗쪽에 맞게 위치하고 싶은데요

구조는 잘 들어간것같은데 클릭하면 제가 놓은 선택자로 가지않고 이상한곳으로 갑니다.

그리고 여러번 클릭했을때 유동적으로 움직이는것같아요 ..

제가 원하는 곳에 픽스되도록 수정좀 부탁드립니다 ..!

 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>스크롤</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script  src="https://code.jquery.com/jquery-latest.min.js"></script>
    <link href="http://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
  </head>
  <style>
    .modal .modal-content.modal-content__form { min-width: 900px; max-width: 900px; }
    .modal .modal-content.modal-content__form .box {height: 720px; padding: 0;}
   
    .modal-content {
    z-index: 10;
    width: 50%;
    position: absolute;
    top: 50%;
    transform: translateY( -50%); }
    .modal-con {
    overflow: auto;
    height: 612px;
  }
  .modal-con .modal-con__menu {
    position: absolute;
    width: 18%;
    height: calc( 100% - 108px );
    left: 0;
    padding-top: 12px;
    border-right: solid 1px #E4E5ED;
    background: #fff;
    overflow-y: auto;
}
.modal-con .modal-con__menu li {
    cursor: pointer;
    padding: 14px 21px;
    font-size: 14px;
    font-weight: 500;
    display: block;
    color: #9A9BA7;
    transition: all ease 0.2s;
}
.modal-con .form-step {
    display: none;
    width: 82%;
    height: 100%;
    right: 0;
    float: right;
    padding: 0 21px 0;
}
.modal .modal-content.modal-content__form .bottom-btn {
    text-align: right;
    background: #Fff;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: solid 1px #E4E5ED;
    padding: 12px 24px 15px;
    z-index: 1;
    border-radius: 0 0 18px 18px;
    float: right;
}
  </style>
  <body>
    <div class="is-desktop">
 
        <!------------------ 모달창--------------------------->
        <div id="" class="modal" style="display: flex">
          <div class="modal-background"></div>
          <div class="modal-content modal-content__form" style=" overflow: unset; ">
              <div class="box">
                  <div class="afms-header__con is-flex is-justify-content-space-between is-align-items-center" style="background: #fff;">
                      <div class="is-flex is-size-7 has-text-weight-medium">
                          <span style="color: #9A9BA7;">상단제목</span>
                      </div>
                      <span class="header-icon">
                          <a href="javascript:void(0);" class="close_btn modal_close has-text-black">×</a>
                      </span>
                  </div>
                  <article>
                      <div class="is-flex is-align-items-end is-justify-content-space-between py-2 px-3" style="border-bottom: solid 1px #E4E5ED; ">
                          <div class="cont-select2 cont-select__quantity mt-0"  style="width: 80%; ">
                          </div>
                          <div class="is-flex">
                              <button class="apt-btn apt-btn__sky is-size-6" >버튼</button>
                          </div>
                      </div>
                      <div class="modal-con modal-con__quantity" style="height: 600px;">
                          <div class="modal-con__menu pt-0">
                              <article class="is-relative" style=" border-bottom: solid 1px #F2F3F7;">
                                  <div class="media-content py-4 px-3 detail_view detail_view__quantity" style="background: #f3f3f3; cursor: pointer;">
                                      <div class="is-flex is-align-items-center is-justify-content-space-between">
                                          <div class="con_title is-flex is-align-items-self-end" style="color: #132997;">
                                              <span class="is-size-6 ">111</span>
                                          </div>
                                      </div>
                                  </div>
                                  <ul class="media-content media-content__quantity" style="overflow-x: unset;">
                                      <li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-1">1.ㄱㄴㄷ</li>
                                      <li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-2">2.ㄹㅁㅂ</li>
                                      <li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-3">3.ㅅㅇㅈ</li>
                                      <li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-4">4.ㅊㅋㅌ</li>
                                      <li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-5">5.ㅍㅎ</li>
                                  </ul>
                              </article>
                              <article class="is-relative" style=" border-bottom: solid 1px #F2F3F7;">
                                  <div class="media-content py-4 px-3 detail_view detail_view__quantity" style="background: #f3f3f3; cursor: pointer;">
                                      <div class="is-flex is-align-items-center is-justify-content-space-between">
                                          <div class="con_title is-flex is-align-items-self-end" style="color: #132997;">
                                              <span class="is-size-6 ">222</span>
                                          </div>
                                      </div>
                                  </div>
                                  <ul class="media-content media-content__quantity" style="overflow-x: unset;">
                                      <li class="btnQuantityScroll" data-scrolldiv="quantityScroll2-1">ABC</li>
                                  </ul>
                              </article>
                              <article class="is-relative" style=" border-bottom: solid 1px #F2F3F7;">
                                  <div class="media-content py-4 px-3 detail_view detail_view__quantity" style="background: #f3f3f3; cursor: pointer;">
                                      <div class="is-flex is-align-items-center is-justify-content-space-between">
                                          <div class="con_title is-flex is-align-items-self-end" style="color: #132997;">
                                              <span class="is-size-6 ">333</span>
                                          </div>
                                      </div>
                                  </div>
                                  <ul class="media-content media-content__quantity" style="overflow-x: unset;">
                                      <li class="btnQuantityScroll" data-scrolldiv="quantityScroll3-1">1234</li>
                                  </ul>
                              </article>
                          </div>
                          <div class="form-step form-step__quantity form-step1 current" style="padding-bottom: 80px; display: inherit;">
                              <div class="field mb-0" id="quantityScroll1-1">
                                  <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
                                      <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
                                          <div class="is-flex is-align-items-center is-justify-content-space-between">
                                              <div class="con_title is-flex is-align-items-self-end">
                                                  <span class="is-size-6 ">1.ㄱㄴㄷ</span>
                                              </div>
                                              <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
                                                  <img src="assets/images/selecticon_arrowup.svg" alt="">
                                              </a>
                                          </div>
                                      </div>
                                      <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
                                        <div style="background: grey; height: 300px;"></div>
                                      </div>
                                  </article>
                              </div>
                              <div class="field mb-0" id="quantityScroll1-2">
                                  <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
                                      <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
                                          <div class="is-flex is-align-items-center is-justify-content-space-between">
                                              <div class="con_title is-flex is-align-items-self-end">
                                                  <span class="is-size-6 ">2.ㄹㅁㅂ</span>
                                              </div>
                                              <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
                                                  <img src="assets/images/selecticon_arrowup.svg" alt="">
                                              </a>
                                          </div>
                                      </div>
                                      <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
                                        <div style="background: grey; height: 300px;"></div>
                                      </div>
                                  </article>
                              </div>
                              <div class="field mb-0" id="quantityScroll1-3">
                                  <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
                                      <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
                                          <div class="is-flex is-align-items-center is-justify-content-space-between">
                                              <div class="con_title is-flex is-align-items-self-end">
                                                  <span class="is-size-6 ">3.ㅅㅇㅈ</span>
                                              </div>
                                              <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
                                                  <img src="assets/images/selecticon_arrowup.svg" alt="">
                                              </a>
                                          </div>
                                      </div>
                                      <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
                                        <div style="background: grey; height: 300px;"></div>
                                      </div>
                                  </article>
                              </div>
                              <div class="field mb-0" id="quantityScroll1-4">
                                  <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
                                      <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
                                          <div class="is-flex is-align-items-center is-justify-content-space-between">
                                              <div class="con_title is-flex is-align-items-self-end">
                                                  <span class="is-size-6 ">4.ㅊㅋㅊ</span>
                                              </div>
                                              <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
                                                  <img src="assets/images/selecticon_arrowup.svg" alt="">
                                              </a>
                                          </div>
                                      </div>
                                      <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
                                        <div style="background: grey; height: 300px;"></div>
                                      </div>
                                  </article>
                              </div>
                              <div class="field mb-0" id="quantityScroll1-5">
                                  <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
                                      <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
                                          <div class="is-flex is-align-items-center is-justify-content-space-between">
                                              <div class="con_title is-flex is-align-items-self-end">
                                                  <span class="is-size-6 ">5.ㅍㅎ</span>
                                              </div>
                                              <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
                                                  <img src="assets/images/selecticon_arrowup.svg" alt="">
                                              </a>
                                          </div>
                                      </div>
                                      <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset;">
                                        <div style="background: grey; height: 300px;"></div>
                                      </div>
                                  </article>
                              </div>
                              <div class="field mb-0" id="quantityScroll2-1">
                                  <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
                                      <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
                                          <div class="is-flex is-align-items-center is-justify-content-space-between">
                                              <div class="con_title is-flex is-align-items-self-end">
                                                  <span class="is-size-6 ">123</span>
                                              </div>
                                              <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
                                                  <img src="assets/images/selecticon_arrowup.svg" alt="">
                                              </a>
                                          </div>
                                      </div>
                                      <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
                                        <div style="background: grey; height: 300px;"></div>
                                      </div>
                                  </article>
                              </div>
                              <div class="field mb-0" id="quantityScroll3-1">
                                  <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
                                      <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
                                          <div class="is-flex is-align-items-center is-justify-content-space-between">
                                              <div class="con_title is-flex is-align-items-self-end">
                                                  <span class="is-size-6 ">ABC</span>
                                              </div>
                                              <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
                                                  <img src="assets/images/selecticon_arrowup.svg" alt="">
                                              </a>
                                          </div>
                                      </div>
                                      <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset;">
                                        <div style="background: grey; height: 300px;"></div>
                                      </div>
                                  </article>
                              </div>
                          </div>
                      </div>
                      <div class="bottom-btn p-3">
                          <button class="apt-btn apt-btn__grey2 is-size-6 is-justify-content-center" id="quantityCancel" style="width: 115px;">취소</button>
                          <button class="apt-btn apt-btn__navy on is-size-6 is-justify-content-center" id="quantityEdit" style="width: 115px;">수정</button>
                          <button class="apt-btn apt-btn__navy on is-size-6 is-justify-content-center" id="quantitySave" style="width: 115px;">저장</button>
                      </div>
                  </article>
              </div>
          </div>
      </div>
      <!------------------ 모달창--------------------------->
 
    </div>
  </body>
  <script>
    //서랍메뉴 접기펼치기
    $(".card_detail__btn").css("transform","rotate(0deg)");
      $(".detail_view").click(function(){
          var submenu = $(this).parents().children(".media-content__detail");
          if( submenu.is(":visible") ){
              $(this).parent().find(".card_detail__btn").css("transform","rotate(180deg)");
              submenu.slideUp();
          }else{
              $(this).parent().find(".card_detail__btn").css("transform","rotate(0deg)");
              submenu.slideDown();
          }
      });
    //좌측 서랍메뉴 접기 펼치기
    $(".detail_view.detail_view__quantity").click(function(){
     
          var submenu = $(this).parents().children(".media-content__quantity");
          if( submenu.is(":visible") ){
              $(this).parent().find(".card_detail__btn").css("transform","rotate(180deg)");
              $(this).css("background","#fff");
              submenu.slideUp();
          }else{
              $(this).parent().find(".card_detail__btn").css("transform","rotate(0deg)");
              $(this).css("background","#F3F3F3");
              //$(this).css("transform","rotate(180deg)");
              submenu.slideDown();
          }
      });
      //좌측 탭메뉴 스크롤링
      $(".btnQuantityScroll").click(function() {
          //스크롤링 추가
          var  scrolldiv = $(this).data("scrolldiv");
 
          var offset = $("#"+scrolldiv+"").offset(); // Contains .top and .left
 
          if(scrolldiv == "quantityScroll1-1"){
              $('.modal-con').animate({
                  scrollTop: 0 });
          }else{
              $('.modal-con').animate({
                  scrollTop: offset.top });
          }
 
      });
  </script>
</html>
 

이 질문에 댓글 쓰기 :

답변 2

다음처럼 hash 방식을 이용하는 방법이 있습니다.


<style>
...
    .modal-con {
    overflow: auto;
    height: 612px;
    scroll-behavior: smooth;
  }
...
</style>
 
<script>
...
      //좌측 탭메뉴 스크롤링
      $(".btnQuantityScroll").click(function() {
          //스크롤링 추가
          var  scrolldiv = $(this).data("scrolldiv");
 
          location.hash = "#" + scrolldiv;
          // var offset = $("#"+scrolldiv+"").offset(); // Contains .top and .left
 
          // if(scrolldiv == "quantityScroll1-1"){
          //     $('.modal-con').animate({
          //         scrollTop: 0 });
          // }else{
          //     $('.modal-con').animate({
          //         scrollTop: offset.top });
          // }
 
      });
</script>
답변을 작성하시기 전에 로그인 해주세요.
전체 138
QA 내용 검색

회원로그인

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