인프런 커뮤니티 질문&답변

고맙습니다~~

강의 들어주셔서 감사합니다. :)

아래 코드와 같이 터치, 휠 이벤트는 preventDefault를 사용하면 스크롤을 막을 수 있습니다.

<script>
	function handle (event) {
		event.preventDefault();
	}
</script>
<div on:wheel={handle} on:touchmove={handle}></div>
<style>
	div {
		height: 200vh;
	}
</style>

브라우저에서는 터치 혹은 휠 이벤트가 발생할 때 마다 스크롤을 할지 말지 결정을 해야 합니다. 스크롤이 발생하면 많은 이벤트가 발생하게 되는데, 이벤트 마다 스크롤을 할지 말지 판단하게 된다면 브라우저는 느려질 수 있습니다.

이때 passive 속성을 사용해서 브라우저에게 preventDefault를 사용해서 스크롤을 막지 않겠다고 알려줍니다. 그러면 브라우저는 항상 스크롤을 하는 것으로 인식하고, 스크롤 할지 말지 결정하는데 낭비되는 자원을 절약해서 성능을 향상 시킬 수 있게 됩니다.

참고가 될 만한 링크입니다.

http://sculove.github.io/blog/2016/12/29/addEventListener-passive/

https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

질문 주셔서 갑사합니다. :)

이해하기 어려운거 있다면 언제든 질문 주세요~!