• J볃교

스크롤 안 움직이게 막기, 스크롤 고정

2019-06-04 301

설명

  • 카카오톡 링크

스크롤 안 움직이게 막기, 스크롤 고정 소스입니다 :D

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style type="text/css">
	.test_box {position:relative; display:inline-block; width:100%; height:300px; overflow-y:scroll}
	.test_box_in {position:relative; height:300px}
	.screen {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.25)}
	.test_left {position:absolute; left:0; top:0; width:300px; z-index:1; height:300px; overflow-y:scroll; background:#f2849e}
	.test_left ul {height:500px;}
	.test_left ul li {display:inline-block; width:100%; }
	.test_left ul li a {display:inline-block; width:100%; height:36px; line-height:34px; font-size:16px; font-weight:400; color:#fff}
	.test_content {height:500px; background:#f2b134}
</style>

<div class="test_box">
	<!-- test_box_in -->
	<div class="test_box_in">
		<div class="screen">
		</div>
		<div class="test_left">
			<ul>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
				<li><a href="javascript:;">테스트메뉴입니다</a></li>
			</ul>
		</div>
		<div class="test_content">
			
		</div>
	</div>
	<!-- //test_box_in -->
</div>

<script type="text/javascript">
	$('.screen').on('scroll touchmove mousewheel', function(event) {
		event.preventDefault();
		event.stopPropagation();
		return false;
	});

</script>