클릭 시 원하는 위치로 스크롤링 되기 채택완료
모달창 안에서
좌측 메뉴를 클릭했을때 우측의 스크롤이 해당 위치의 맨 윗쪽에 맞게 위치하고 싶은데요
구조는 잘 들어간것같은데 클릭하면 제가 놓은 선택자로 가지않고 이상한곳으로 갑니다.
그리고 여러번 클릭했을때 유동적으로 움직이는것같아요 ..
제가 원하는 곳에 픽스되도록 수정좀 부탁드립니다 ..!
</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개
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
채택
채택
답변대기
채택
답변대기
답변대기
채택
채택
답변대기
답변대기
채택
채택
답변대기
채택
답변대기
채택
답변대기
채택