Example
<style>
#scroll_parent{
width: 400px;
height: 600px;
overflow-y: scroll;
background: red;
position: relative;
}
#scroll_child {
width: 200px;
height: 300px;
overflow-y: scroll;
background: #c680ff;
position: absolute;
top: 0;
left: 0;
}
#no_scroll_child{
width: 100px;
height: 400px;
overflow-y: hidden;
background: #8cc46e;
position: absolute;
top: 0;
right: 0;
}
.block {
width: 50px;
height: 50px;
margin: 10px;
padding: 10px;
}
</style>
<body>
<div id="scroll_parent">
<div id='scroll_child'>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div id="no_scroll_child">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<script src="script.js"></script>
</body>
- 빨간 영역 : 스크롤 가능한 부모
- 보라색 영역: 스크롤 가능한 자식
- 초록색 영역: 스크롤 불가능한 자식
요구사항
- 마우스가 초록색 영역에서 스크롤 하는 경우에는 빨간색 영역이 움직이지 않으면 좋겠다.
- 마우스가 보라색 영역에서 스크롤 하는 경우에는 보라색 영역만 스크롤 되고, 빨간색 영역은 움직이지 않으면 좋겠다.
현재 상황
- 초록색 영역은 빨간색이 스크롤 되고, 보라색 영역은 보라색 스크롤이 끝나면 빨간색 영역으로 스크롤이 버블링된다.
해결방법
function stopBubbleScroll($el) {
const stopScrollFunc = (e) => {
e.stopPropagation();
const delta = e.wheelDeltaY;
if (delta < 0) {
if ($el.scrollHeight - $el.clientHeight <= Math.ceil($el.scrollTop))
e.preventDefault();
} else {
if ($el.scrollTop <= 0) e.preventDefault();
}
};
$el.addEventListener("mousewheel", stopScrollFunc, { passive: false });
}
function deleteBubbleScroll($el) {
const deleteScrollFunc = (e) => {
e.preventDefault();
};
$el.addEventListener("mousewheel", deleteScrollFunc, { passive: false });
}
const $noScrollChild = document.getElementById('no_scroll_child');
const $ScrollChild = document.getElementById('scroll_child');
stopBubbleScroll($noScrollChild);
stopBubbleScroll($ScrollChild);
