셀렉트박스(접근성)

.btn-text {
							display:block;
							min-width:174px;
							margin:40px auto 0;
							padding:10px 20px;
							border-radius:5px;
							border:0;
							background-color:#333;
							color:#fff;
							font-size:14px;
						}

/* 스와이핑 레이어 */
						.swipe-layer {
							position:fixed;
							right:0;
							bottom:0;
							left:0;
							z-index:120;
							height:0;
							max-height:80%;
							min-height:32px;
							background-color:#fff;
							box-shadow:0 0 20px rgba(0,0,0,0.1);
							transition:height 0.3s;
						}
						.swipe-layer.active {
							height:100%;
						}

.swipe-layer .btn-sw {
							position:relative;
							width:100%;
							height:32px;
							padding:0;
							border:0;
							background-color:transparent;
							color:transparent;
							font-size:1px;
							vertical-align:top;
							line-height:1px;
							letter-spacing:-10px;
						}
						.swipe-layer .btn-sw::before {
							content:'';
							position:absolute;
							top:50%;
							left:50%;
							transform:translate(-50%,-50%);
							width:70px;
							height:5px;
							border-radius:100px;
							background-color:#ddd;
						}

.swipe-layer .sw-scroll-area {
							overflow-x:hidden;
							overflow-y:auto;
							margin:0 20px;
							box-sizing:border-box;
							border:1px solid #ddd;
						}
						.swipe-layer .sw-scroll-area .scroll-inner {
							padding:20px;
						}

.swipe-layer .sw-title {
							padding:10px 20px;
							font-size:18px;
							font-weight:bold;
						}

.swipe-layer .btn-area {
							padding:20px 0;
							text-align:center;
						}
						.swipe-layer .btn-area button {
							display:inline-block;
							min-width:80px;
							height:30px;
							padding:0 30px;
							box-sizing:border-box;
							border:1px solid #ccc;
							background-color:#fff;
							color:#1d1d1d;
							font-size:12px;
							line-height:28px;
						}

$(window).on('load', function(){
							jsSwLayer();//스와이핑 레이어
						});

$(window).resize(function(){
							jsSwLayer();//스와이핑 레이어
						});

/* =========
							* 스와이핑 레이어

- 기본 사용 : jsSwLayer();
							- 지정 사용 : jsSwLayer('class명');
							- 콜백 사용 : jsSwLayer('', function(){//콜백영역});
						========= */
						function jsSwLayer(cls, callback){
							var swLayer = 'swipe-layer';

if(cls == 'open'){
								$('.' + swLayer).addClass('active');
							}else if(cls == 'close'){
								$('.' + swLayer).removeClass('active');
							}

$('.' + swLayer).each(function(){
								jsSwOpen();//ios 사파리 대응

$this.find('.sw-scroll-area').css('max-height',scrlH);
							});

if(callback){
								callback(true);
							}

//터치이벤트
							$(document).off('touchstart touchmove touchend click', '.btn-sw');//이벤트해제
							$(document).on('touchstart', '.btn-sw', function(e){
								swSY = e.originalEvent.changedTouches[0].screenY;
								swHeight = $(this).closest('.' + swLayer).outerHeight();

//jsSwOpen();//ios 사파리 대응

$(this).closest('.' + swLayer).removeAttr('style');
								$(this).closest('.' + swLayer).css('transition','height 0s');
							});

$(document).on('touchmove', '.btn-sw', function(e){
								var swMY = e.originalEvent.changedTouches[0].screenY;
								var move = swSY - swMY;
								var turm = 20;

if(move > turm || move < -turm){
									$(this).closest('.' + swLayer).css('height',swHeight + move);

jsSwLayer();
								}
							});

$(document).on('touchend', '.btn-sw', function(e){
								var swEY = e.originalEvent.changedTouches[0].screenY;
								var move = swSY - swEY;
								var turm = 70;
								var $layer = $(this).closest('.' + swLayer);

//jsSwClose();//ios 사파리 대응

$layer.removeAttr('style');

if(move > turm){
									jsSwLayer('open');
								}else if(move < -turm){
									jsSwLayer('close');
								}

jsSwLayer();
								$layer.removeAttr('style');
							});

//클릭
							$(document).on('click', '.btn-sw', function(){
								var $layer = $(this).closest('.' + swLayer);

if($layer.hasClass('active')){
									jsSwLayer('close');
								}else{
									jsSwLayer('open');
								}

jsSwLayer();
							});

$(document).off('click', '.js-swOpen');//이벤트해제
							$(document).off('click', '.js-swClose');//이벤트해제
							$(document).on('click', '.js-swOpen', function(){
								jsSwLayer('open');
							});
							$(document).on('click', '.js-swClose', function(){
								jsSwLayer('close');
							});
						}

//ios 사파리 대응(스크롤 바운스 막기)
						function jsSwOpen(){
							var sTop = $(window).scrollTop();

$('html, body').css({
								'overflow':'hidden',
								'width':'100%',
								'height':'100%'
							});

$('.wrapper').css({
								'overflow-x':'hidden',
								'overflow-y':'auto',
								'position':'fixed',
								'top':-sTop,
								'left':'0',
								'width':'100%',
								'height':'100%'
							});
						}

function jsSwClose(){
							var sTop = $('.wrapper').position().top;

$('html, body, .wrapper').removeAttr('style');
							$('html, body').scrollTop(-sTop);
						}

바텀 스와이프 레이어

예제

사용방법

코드

- html

- css

- script