[Javascrip] 익스플로러 position: fixed 떨림 현상

 

코딩을 할 때 크롬에서 확인을 하다보니 익스플로러에서 발생하는 오류에 대해서 놓치는 경우가 상당히 많다..;ㅅ; 

당연히 이젠 크롬을 많이 쓰겠거니 하고 주위에 물어보면 아직도 익스플로러를 사용하는 사람이 많아서

아무리 엣지로 바뀌었다 하지만 익스플로러를 아예 무시할 수가 없는것이다..

 

익스플로러에서의 position: fixed 떨림은 간단한 fixed icon은 괜찮지만

header라던가 전체적으로 이미지가 fixed 되어야 하는 경우 특히나 잘 보이는 오류이므로

아래 스크립트를 추가해주자.

 

<script>
// position: fixed 사용시 ie 떨림 현상 방지
if( navigator.userAgent.match(/Trident\/7\./) ){
	$('body').on("mousewheel", function(){
		event.preventDefault();

		var wheelDelta = event.wheelDelta,
			currentScrollPosition = window.pageYOffset;

		window.scrollTo(0, currentScrollPosition - wheelDelta);
	});
	$('body').keydown(function(e){
		e.preventDefault();
		var currentScrollPosition = window.pageYOffset;

		switch (e.which){
			case 38: //up
				window.scrollTo(0, currentScrollPosition - 120);
				break;
			case 40: //down
				window.scrollTo(0, currentScrollPosition + 120);
				break;
			default: return;
		}
	});
}
</script>​