클릭 시 원하는 위치로 스크롤링 되기 채택완료
이한나
2년 전
조회 2,195
모달창 안에서
좌측 메뉴를 클릭했을때 우측의 스크롤이 해당 위치의 맨 윗쪽에 맞게 위치하고 싶은데요
구조는 잘 들어간것같은데 클릭하면 제가 놓은 선택자로 가지않고 이상한곳으로 갑니다.
그리고 여러번 클릭했을때 유동적으로 움직이는것같아요 ..
제가 원하는 곳에 픽스되도록 수정좀 부탁드립니다 ..!
</p>
<p><!DOCTYPE html></p>
<p><html></p>
<p> <head></p>
<p> <meta charset="utf-8"></p>
<p> <meta name="viewport" content="width=device-width, initial-scale=1"></p>
<p> <title>스크롤</title></p>
<p> <link rel="stylesheet" href="<a href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"></a></p>
<p> <link rel="stylesheet" href="assets/css/style.css"></p>
<p> <script src="<a href="https://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-latest.min.js"></script></a></p>
<p> <link href="<a href="http://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"" target="_blank" rel="noopener noreferrer">http://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"</a> rel="stylesheet"></p>
<p> </head></p>
<p> <style></p>
<p> .modal .modal-content.modal-content__form { min-width: 900px; max-width: 900px; }</p>
<p> .modal .modal-content.modal-content__form .box {height: 720px; padding: 0;}</p>
<p> </p>
<p> .modal-content {</p>
<p> z-index: 10;</p>
<p> width: 50%;</p>
<p> position: absolute;</p>
<p> top: 50%;</p>
<p> transform: translateY( -50%); }</p>
<p> .modal-con {</p>
<p> overflow: auto;</p>
<p> height: 612px;</p>
<p> }</p>
<p> .modal-con .modal-con__menu {</p>
<p> position: absolute;</p>
<p> width: 18%;</p>
<p> height: calc( 100% - 108px );</p>
<p> left: 0;</p>
<p> padding-top: 12px;</p>
<p> border-right: solid 1px #E4E5ED;</p>
<p> background: #fff;</p>
<p> overflow-y: auto;</p>
<p>}</p>
<p>.modal-con .modal-con__menu li {</p>
<p> cursor: pointer;</p>
<p> padding: 14px 21px;</p>
<p> font-size: 14px;</p>
<p> font-weight: 500;</p>
<p> display: block;</p>
<p> color: #9A9BA7;</p>
<p> transition: all ease 0.2s;</p>
<p>}</p>
<p>.modal-con .form-step {</p>
<p> display: none;</p>
<p> width: 82%;</p>
<p> height: 100%;</p>
<p> right: 0;</p>
<p> float: right;</p>
<p> padding: 0 21px 0;</p>
<p>}</p>
<p>.modal .modal-content.modal-content__form .bottom-btn {</p>
<p> text-align: right;</p>
<p> background: #Fff;</p>
<p> position: absolute;</p>
<p> bottom: 0;</p>
<p> left: 0;</p>
<p> border-top: solid 1px #E4E5ED;</p>
<p> padding: 12px 24px 15px;</p>
<p> z-index: 1;</p>
<p> border-radius: 0 0 18px 18px;</p>
<p> float: right;</p>
<p>}</p>
<p> </style></p>
<p> <body></p>
<p> <div class="is-desktop"></p>
<p> </p>
<p> <!------------------ 모달창---------------------------></p>
<p> <div id="" class="modal" style="display: flex"></p>
<p> <div class="modal-background"></div></p>
<p> <div class="modal-content modal-content__form" style=" overflow: unset; "></p>
<p> <div class="box"></p>
<p> <div class="afms-header__con is-flex is-justify-content-space-between is-align-items-center" style="background: #fff;"></p>
<p> <div class="is-flex is-size-7 has-text-weight-medium"></p>
<p> <span style="color: #9A9BA7;">상단제목</span></p>
<p> </div></p>
<p> <span class="header-icon"></p>
<p> <a href="javascript:void(0);" class="close_btn modal_close has-text-black">×</a></p>
<p> </span></p>
<p> </div></p>
<p> <article></p>
<p> <div class="is-flex is-align-items-end is-justify-content-space-between py-2 px-3" style="border-bottom: solid 1px #E4E5ED; "></p>
<p> <div class="cont-select2 cont-select__quantity mt-0" style="width: 80%; "></p>
<p> </div></p>
<p> <div class="is-flex"></p>
<p> <button class="apt-btn apt-btn__sky is-size-6" >버튼</button></p>
<p> </div></p>
<p> </div></p>
<p> <div class="modal-con modal-con__quantity" style="height: 600px;"></p>
<p> <div class="modal-con__menu pt-0"></p>
<p> <article class="is-relative" style=" border-bottom: solid 1px #F2F3F7;"></p>
<p> <div class="media-content py-4 px-3 detail_view detail_view__quantity" style="background: #f3f3f3; cursor: pointer;"></p>
<p> <div class="is-flex is-align-items-center is-justify-content-space-between"></p>
<p> <div class="con_title is-flex is-align-items-self-end" style="color: #132997;"></p>
<p> <span class="is-size-6 ">111</span></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> <ul class="media-content media-content__quantity" style="overflow-x: unset;"></p>
<p> <li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-1">1.ㄱㄴㄷ</li></p>
<p> <li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-2">2.ㄹㅁㅂ</li></p>
<p> <li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-3">3.ㅅㅇㅈ</li></p>
<p> <li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-4">4.ㅊㅋㅌ</li></p>
<p> <li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-5">5.ㅍㅎ</li></p>
<p> </ul></p>
<p> </article></p>
<p> <article class="is-relative" style=" border-bottom: solid 1px #F2F3F7;"></p>
<p> <div class="media-content py-4 px-3 detail_view detail_view__quantity" style="background: #f3f3f3; cursor: pointer;"></p>
<p> <div class="is-flex is-align-items-center is-justify-content-space-between"></p>
<p> <div class="con_title is-flex is-align-items-self-end" style="color: #132997;"></p>
<p> <span class="is-size-6 ">222</span></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> <ul class="media-content media-content__quantity" style="overflow-x: unset;"></p>
<p> <li class="btnQuantityScroll" data-scrolldiv="quantityScroll2-1">ABC</li></p>
<p> </ul></p>
<p> </article></p>
<p> <article class="is-relative" style=" border-bottom: solid 1px #F2F3F7;"></p>
<p> <div class="media-content py-4 px-3 detail_view detail_view__quantity" style="background: #f3f3f3; cursor: pointer;"></p>
<p> <div class="is-flex is-align-items-center is-justify-content-space-between"></p>
<p> <div class="con_title is-flex is-align-items-self-end" style="color: #132997;"></p>
<p> <span class="is-size-6 ">333</span></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> <ul class="media-content media-content__quantity" style="overflow-x: unset;"></p>
<p> <li class="btnQuantityScroll" data-scrolldiv="quantityScroll3-1">1234</li></p>
<p> </ul></p>
<p> </article></p>
<p> </div></p>
<p> <div class="form-step form-step__quantity form-step1 current" style="padding-bottom: 80px; display: inherit;"></p>
<p> <div class="field mb-0" id="quantityScroll1-1"></p>
<p> <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;"></p>
<p> <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;"></p>
<p> <div class="is-flex is-align-items-center is-justify-content-space-between"></p>
<p> <div class="con_title is-flex is-align-items-self-end"></p>
<p> <span class="is-size-6 ">1.ㄱㄴㄷ</span></p>
<p> </div></p>
<p> <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn"></p>
<p> <img src="assets/images/selecticon_arrowup.svg" alt=""></p>
<p> </a></p>
<p> </div></p>
<p> </div></p>
<p> <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; "></p>
<p> <div style="background: grey; height: 300px;"></div></p>
<p> </div></p>
<p> </article></p>
<p> </div></p>
<p> <div class="field mb-0" id="quantityScroll1-2"></p>
<p> <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;"></p>
<p> <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;"></p>
<p> <div class="is-flex is-align-items-center is-justify-content-space-between"></p>
<p> <div class="con_title is-flex is-align-items-self-end"></p>
<p> <span class="is-size-6 ">2.ㄹㅁㅂ</span></p>
<p> </div></p>
<p> <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn"></p>
<p> <img src="assets/images/selecticon_arrowup.svg" alt=""></p>
<p> </a></p>
<p> </div></p>
<p> </div></p>
<p> <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; "></p>
<p> <div style="background: grey; height: 300px;"></div></p>
<p> </div></p>
<p> </article></p>
<p> </div></p>
<p> <div class="field mb-0" id="quantityScroll1-3"></p>
<p> <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;"></p>
<p> <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;"></p>
<p> <div class="is-flex is-align-items-center is-justify-content-space-between"></p>
<p> <div class="con_title is-flex is-align-items-self-end"></p>
<p> <span class="is-size-6 ">3.ㅅㅇㅈ</span></p>
<p> </div></p>
<p> <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn"></p>
<p> <img src="assets/images/selecticon_arrowup.svg" alt=""></p>
<p> </a></p>
<p> </div></p>
<p> </div></p>
<p> <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; "></p>
<p> <div style="background: grey; height: 300px;"></div></p>
<p> </div></p>
<p> </article></p>
<p> </div></p>
<p> <div class="field mb-0" id="quantityScroll1-4"></p>
<p> <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;"></p>
<p> <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;"></p>
<p> <div class="is-flex is-align-items-center is-justify-content-space-between"></p>
<p> <div class="con_title is-flex is-align-items-self-end"></p>
<p> <span class="is-size-6 ">4.ㅊㅋㅊ</span></p>
<p> </div></p>
<p> <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn"></p>
<p> <img src="assets/images/selecticon_arrowup.svg" alt=""></p>
<p> </a></p>
<p> </div></p>
<p> </div></p>
<p> <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; "></p>
<p> <div style="background: grey; height: 300px;"></div></p>
<p> </div></p>
<p> </article></p>
<p> </div></p>
<p> <div class="field mb-0" id="quantityScroll1-5"></p>
<p> <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;"></p>
<p> <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;"></p>
<p> <div class="is-flex is-align-items-center is-justify-content-space-between"></p>
<p> <div class="con_title is-flex is-align-items-self-end"></p>
<p> <span class="is-size-6 ">5.ㅍㅎ</span></p>
<p> </div></p>
<p> <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn"></p>
<p> <img src="assets/images/selecticon_arrowup.svg" alt=""></p>
<p> </a></p>
<p> </div></p>
<p> </div></p>
<p> <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset;"></p>
<p> <div style="background: grey; height: 300px;"></div></p>
<p> </div></p>
<p> </article></p>
<p> </div></p>
<p> <div class="field mb-0" id="quantityScroll2-1"></p>
<p> <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;"></p>
<p> <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;"></p>
<p> <div class="is-flex is-align-items-center is-justify-content-space-between"></p>
<p> <div class="con_title is-flex is-align-items-self-end"></p>
<p> <span class="is-size-6 ">123</span></p>
<p> </div></p>
<p> <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn"></p>
<p> <img src="assets/images/selecticon_arrowup.svg" alt=""></p>
<p> </a></p>
<p> </div></p>
<p> </div></p>
<p> <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; "></p>
<p> <div style="background: grey; height: 300px;"></div></p>
<p> </div></p>
<p> </article></p>
<p> </div></p>
<p> <div class="field mb-0" id="quantityScroll3-1"></p>
<p> <article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;"></p>
<p> <div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;"></p>
<p> <div class="is-flex is-align-items-center is-justify-content-space-between"></p>
<p> <div class="con_title is-flex is-align-items-self-end"></p>
<p> <span class="is-size-6 ">ABC</span></p>
<p> </div></p>
<p> <a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn"></p>
<p> <img src="assets/images/selecticon_arrowup.svg" alt=""></p>
<p> </a></p>
<p> </div></p>
<p> </div></p>
<p> <div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset;"></p>
<p> <div style="background: grey; height: 300px;"></div></p>
<p> </div></p>
<p> </article></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> <div class="bottom-btn p-3"></p>
<p> <button class="apt-btn apt-btn__grey2 is-size-6 is-justify-content-center" id="quantityCancel" style="width: 115px;">취소</button></p>
<p> <button class="apt-btn apt-btn__navy on is-size-6 is-justify-content-center" id="quantityEdit" style="width: 115px;">수정</button></p>
<p> <button class="apt-btn apt-btn__navy on is-size-6 is-justify-content-center" id="quantitySave" style="width: 115px;">저장</button></p>
<p> </div></p>
<p> </article></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> <!------------------ 모달창---------------------------></p>
<p> </p>
<p> </div></p>
<p> </body></p>
<p> <script></p>
<p> //서랍메뉴 접기펼치기</p>
<p> $(".card_detail__btn").css("transform","rotate(0deg)");</p>
<p> $(".detail_view").click(function(){</p>
<p> var submenu = $(this).parents().children(".media-content__detail");</p>
<p> if( submenu.is(":visible") ){</p>
<p> $(this).parent().find(".card_detail__btn").css("transform","rotate(180deg)");</p>
<p> submenu.slideUp();</p>
<p> }else{</p>
<p> $(this).parent().find(".card_detail__btn").css("transform","rotate(0deg)");</p>
<p> submenu.slideDown();</p>
<p> }</p>
<p> });</p>
<p> //좌측 서랍메뉴 접기 펼치기</p>
<p> $(".detail_view.detail_view__quantity").click(function(){</p>
<p> </p>
<p> var submenu = $(this).parents().children(".media-content__quantity");</p>
<p> if( submenu.is(":visible") ){</p>
<p> $(this).parent().find(".card_detail__btn").css("transform","rotate(180deg)");</p>
<p> $(this).css("background","#fff");</p>
<p> submenu.slideUp();</p>
<p> }else{</p>
<p> $(this).parent().find(".card_detail__btn").css("transform","rotate(0deg)");</p>
<p> $(this).css("background","#F3F3F3");</p>
<p> //$(this).css("transform","rotate(180deg)");</p>
<p> submenu.slideDown();</p>
<p> }</p>
<p> });</p>
<p> //좌측 탭메뉴 스크롤링</p>
<p> $(".btnQuantityScroll").click(function() {</p>
<p> //스크롤링 추가</p>
<p> var scrolldiv = $(this).data("scrolldiv");</p>
<p> </p>
<p> var offset = $("#"+scrolldiv+"").offset(); // Contains .top and .left</p>
<p> </p>
<p> if(scrolldiv == "quantityScroll1-1"){</p>
<p> $('.modal-con').animate({</p>
<p> scrollTop: 0 });</p>
<p> }else{</p>
<p> $('.modal-con').animate({</p>
<p> scrollTop: offset.top });</p>
<p> }</p>
<p> </p>
<p> });</p>
<p> </script></p>
<p></html></p>
<p> </p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
2년 전
다음처럼 hash 방식을 이용하는 방법이 있습니다.
</p>
<p><style></p>
<p>...</p>
<p> .modal-con {
overflow: auto;
height: 612px;
scroll-behavior: smooth;
}</p>
<p>...</p>
<p></style></p>
<p> </p>
<p><script></p>
<p>...</p>
<p> //좌측 탭메뉴 스크롤링
$(".btnQuantityScroll").click(function() {
//스크롤링 추가
var scrolldiv = $(this).data("scrolldiv");
location.hash = "#" + scrolldiv;</p>
<p> // var offset = $("#"+scrolldiv+"").offset(); // Contains .top and .left
// if(scrolldiv == "quantityScroll1-1"){
// $('.modal-con').animate({
// scrollTop: 0 });
// }else{
// $('.modal-con').animate({
// scrollTop: offset.top });
// }
});</p>
<p></script></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
이한나
2년 전
감사합니다!
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인