IT정보/jQuery_javaScript
[제이쿼리] 기본 가로스크롤 선택요소 중앙정렬 & 스크롤에 따른 처음과 끝 버튼 처리 PC와 M버전별
천재소년s
2023. 1. 17. 13:34
반응형
모바일 : 기본 가로스크롤 선택요소 중앙정렬
임시로 스크롤은 보여지게 해놓음
.mobile.prodPaySort {position:relative;overflow:hidden;margin: 12px -20px 0;padding:0 10px;}
.mobile.prodPaySort .scrollx{overflow-x:auto;white-space: nowrap;}
.mobile.prodPaySort .scrollx::-webkit-scrollbar {display: block;width:1px;height:1px;-webkit-overflow-scrolling: touch;}
.mobile.prodPaySort .scrollx::-webkit-scrollbar-thumb {height:30%;background-color:transparent;border-radius: 50px;box-shadow:none;}
.mobile.prodPaySort .scrollx::-webkit-scrollbar-track {background-color:transparent;}
.mobile.prodPaySort .btn_ctrl{position:absolute;top: 50%;display:flex;visibility:hidden;opacity:0;transition:all 0.2s;width:28px;height:40px;transform: translateY(-50%);z-index:100;font-size:1px;color:transparent;text-align:center;align-items: center;justify-content: center;}
.mobile.prodPaySort .btn_ctrl.prev{left:0;}
.mobile.prodPaySort .btn_ctrl.next{right:0;}
.mobile.prodPaySort .btn_ctrl.prev:after, .mobile.prodPaySort .btn_ctrl.next:after{content:'';display:block;position:absolute;width:8px;height:12px;background:url('/images/mobile/common/btn_next02.png') no-repeat 0 0;background-size:8px auto;}
.mobile.prodPaySort .btn_ctrl.prev:after{transform: rotate(-180deg);}
.mobile.prodPaySort .btn_ctrl.prev:before, .mobile.prodPaySort .btn_ctrl.next:before{content:'';position:absolute;top:0;display:block;width:60px;height:100%;}
.mobile.prodPaySort .btn_ctrl.prev:before{left:0;
background: rgb(255,255,255);
background: -moz-linear-gradient(90deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background: linear-gradient(90deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000",endColorstr="#ffffff",GradientType=1);
}
.mobile.prodPaySort .btn_ctrl.next:before{right:0;
background: rgb(255,255,255);
background: -moz-linear-gradient(270deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(270deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background: linear-gradient(270deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000",endColorstr="#ffffff",GradientType=1);
}
.mobile.prodPaySort .btn_ctrl.show{visibility:visible;opacity:1;}
.mobile.prodPaySort .inner {font-size:0;}
.mobile.prodPaySort button {display:inline-block;padding:0 15px;height:32px;font-size:14px;color:#525252;vertical-align:top;}
.mobile.prodPaySort button.active {color:#fff;font-weight:bold;background-color:#000;border-radius:20px;}
//양쪽 버튼 컨트롤
var popupBtnWidthArr = function popupBtnWidth(){
var $popupScroll = $('.mobile').find('.scrollx');
var step = $popupScroll.parent().width()/2;
$popupScroll.each(function(i){
var $btnPrev = $(this).parent().find(".btn_ctrl.prev");
var $btnNext = $(this).parent().find(".btn_ctrl.next");
if($(this).outerHeight() == $popupScroll.find('.inner').outerHeight()){ // 스크롤이 있을때와 없을때 버튼 보여지게
$btnNext.removeClass('show');
$btnPrev.removeClass('show');
}else{
$btnNext.addClass('show');
}
$('#selectPaymentPop .btnLayerClose').on("click", function(e) { //팝업 닫았을때 버튼 초기화
$btnPrev.removeClass('show');
});
$(this).on('scroll', function() {
$val = $(this).scrollLeft();
var time = 100;
//스크롤 처음
$val == 0 ? $btnPrev.removeClass('show') : $btnPrev.addClass('show');
//스크롤 끝
($val + $(this).outerWidth() + 1 >= $(this)[0].scrollWidth) ? $btnNext.removeClass('show') : $btnNext.addClass('show');
});
$btnPrev.on("click", function(e) {
btnCtrlMove(e, this, 0)
});
$btnNext.on("click", function(e) {
btnCtrlMove(e, this, 1)
});
function btnCtrlMove(e, _this, move) {
e.preventDefault();
move == 0 ? moveText = "-=" : moveText = "+=";
$(_this).parent().prev().stop().animate( {
scrollLeft: moveText + step + "px"
}, 250);
}
});
}
popupBtnWidthArr()
$('.mobile.prodPaySort button').on('click', function(){
$(this).addClass('active').siblings().removeClass('active');
scrollCenter($('.pc.prodPaySort .scrollx'),".active", 200);
});
//scrollCenter($('.mobile.prodPaySort .scrollx'),".active", 200);
var scrollCenter = function(target, elem, speed) {
var active = $(target).find(elem); // find the active element
var activeWidth = active.outerWidth() / 2; // get active width center
var pos = active.position() == undefined ? 0 : active.position().left + activeWidth; //get left position of active li + center position 0613 개발수정
var elpos = $(target).scrollLeft(); // get current scroll position
var elW = $(target).width() + 40; //get div width
pos = pos + elpos - elW / 2; // for center position if you want adjust then change this
$(target).animate({
scrollLeft: pos
}, speed == undefined ? 1000 : speed);
return target;
};
PC : 기본 가로스크롤 선택요소 중앙정렬 (참고 : 개발처리로 버튼이 계속 그려지는 경우의 스크립트 처리)
임시로 스크롤은 보여지게 해놓음
.pc.prodPaySort {position:relative;max-height: 78px;overflow:hidden;border-bottom:1px solid #f3f3f3;}
.pc.prodPaySort .scrollx{overflow-x:auto;white-space: nowrap;}
.pc.prodPaySort .btn_ctrl{position:absolute;top: 50%;display:flex;visibility:hidden;opacity:0;transition:all 0.2s;margin-top:3px;width:30px;height:50px;transform: translateY(-50%);z-index:100;font-size:1px;color:transparent;align-items: center;justify-content: center;}
.pc.prodPaySort .btn_ctrl.prev{left:0;}
.pc.prodPaySort .btn_ctrl.next{right:0;}
.pc.prodPaySort .btn_ctrl.prev:after, .pc.prodPaySort .btn_ctrl.next:after{content:'';position:absolute;display:block;width:9px;height:12px;background:url('/images/pc/common/btn_next02.png') no-repeat 0 0;border:1px solid red;}
.pc.prodPaySort .btn_ctrl.prev:after{transform: rotate(-180deg);}
.pc.prodPaySort .btn_ctrl.prev:before, .pc.prodPaySort .btn_ctrl.next:before{content:'';position:absolute;top:0;display:block;width: 80px;height:100%;}
.pc.prodPaySort .btn_ctrl.prev:before{left:0;
background: rgb(255,255,255);
background: -moz-linear-gradient(90deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background: linear-gradient(90deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000",endColorstr="#ffffff",GradientType=1);
}
.pc.prodPaySort .btn_ctrl.next:before{right:0;
background: rgb(255,255,255);
background: -moz-linear-gradient(270deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(270deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background: linear-gradient(270deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000",endColorstr="#ffffff",GradientType=1);
}
.pc.prodPaySort .btn_ctrl.show{visibility:visible;opacity:1;}
.pc.prodPaySort .inner {width:auto;padding:20px 0 16px;font-size:0;}
.pc.prodPaySort button {margin-top:5px;padding:0 20px;height:36px;font-size:16px;color:#000;font-weight:700;border-radius:27.5px;text-align:center;}
.pc.prodPaySort button + button{margin-left:4px;}
.pc.prodPaySort button span{color:#000;}
.pc.prodPaySort button.active {color:#fff;background-color:#000;}
.pc.prodPaySort button.active span {color:#fff;}
//양쪽 버튼 컨트롤
var popupBtnWidthArr2 = function popupBtnWidth(){
var $popupScroll = $('.pc').find('.scrollx');
var step = $popupScroll.parent().width()/2;
$popupScroll.each(function(i){
var $btnPrev = $(this).parent().find(".btn_ctrl.prev");
var $btnNext = $(this).parent().find(".btn_ctrl.next");
if($(this).outerHeight() == $popupScroll.find('.inner').outerHeight()){ // 스크롤이 있을때와 없을때 버튼 보여지게
$btnNext.removeClass('show');
$btnPrev.removeClass('show');
}else{
$btnNext.addClass('show');
}
$('#btnPplChoiceClose').on("click", function(e) { //팝업 닫았을때 버튼 초기화
$btnPrev.removeClass('show');
});
$(this).on('scroll', function() {
$val = $(this).scrollLeft();
var time = 100;
//스크롤 처음
$val == 0 ? $btnPrev.removeClass('show') : $btnPrev.addClass('show');
//스크롤 끝
($val + $(this).outerWidth() + 1 >= $(this)[0].scrollWidth) ? $btnNext.removeClass('show') : $btnNext.addClass('show');
});
$btnPrev.on("click", function(e) {
btnCtrlMove(e, this, 0)
});
$btnNext.on("click", function(e) {
btnCtrlMove(e, this, 1)
});
function btnCtrlMove(e, _this, move) {
e.preventDefault();
move == 0 ? moveText = "-=" : moveText = "+=";
$(_this).parent().prev().stop().animate( {
scrollLeft: moveText + step + "px"
}, 250);
}
});
}
popupBtnWidthArr2();
$('.pc.prodPaySort button').on('click', function(){
$(this).addClass('active').siblings().removeClass('active');
scrollCenter2($('.pc.prodPaySort .scrollx'),".active", 200);
});
//scrollCenter2($('.pc .scrollx'),".active", 200);
var scrollCenter2 = function(target, elem, speed) {
var active = $(target).find(elem); // find the active element
var pos = active.position() == undefined ? 0 : active.position().left + active.outerWidth() / 2;
var boxHarf = $(target).width()/2;
$(target).stop().delay(1).animate({
scrollLeft: pos - boxHarf
}, speed == undefined ? 1000 : speed);
return target;
};
반응형