클릭 시 원하는 위치로 스크롤링 되기 채택완료
모달창 안에서
좌측 메뉴를 클릭했을때 우측의 스크롤이 해당 위치의 맨 윗쪽에 맞게 위치하고 싶은데요
구조는 잘 들어간것같은데 클릭하면 제가 놓은 선택자로 가지않고 이상한곳으로 갑니다.
그리고 여러번 클릭했을때 유동적으로 움직이는것같아요 ..
제가 원하는 곳에 픽스되도록 수정좀 부탁드립니다 ..!
Copy
스크롤
.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;
}
상단제목
×
버튼
111
1.ㄱㄴㄷ
2.ㄹㅁㅂ
3.ㅅㅇㅈ
4.ㅊㅋㅌ
5.ㅍㅎ
222
ABC
333
1234
1.ㄱㄴㄷ
2.ㄹㅁㅂ
3.ㅅㅇㅈ
4.ㅊㅋㅊ
5.ㅍㅎ
123
ABC
취소
수정
저장
//서랍메뉴 접기펼치기
$(".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 });
}
});
답변 2개
채택된 답변
+20 포인트
2년 전
다음처럼 hash 방식을 이용하는 방법이 있습니다.
Copy
...
.modal-con {
overflow: auto;
height: 612px;
scroll-behavior: smooth;
}
...
...
//좌측 탭메뉴 스크롤링
$(".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 });
// }
});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인