AOS(animate on scroll) IE 오류 대처 방법

정의현 (Uihyun Jung)·2021년 3월 3일
0

html, css, jquery

목록 보기
6/7

스크롤에 따라 컨텐츠에 여러가지 애니메이션 효과를 쉽게 구현해주는 AOS 라이브러리가 있다.

간단히 적용할 수 있어 자주 쓰고 있는데 IE에서는 동작하지 않는다.
IE로 보게되면 AOS가 적용된 컨텐츠에 opacity가 0에서 1로 변환되지 않아서
해당 컨텐츠들이 아예 보이지 않는다.

AOS의 disable method를 사용하여 IE에서 AOS 적용 컨텐츠들이 보여지도록 할 수 있다.

<script>
        AOS.init({
          // disable on internet explorer
            disable:  function msieversion() {
                return !!(window.navigator.userAgent.indexOf("MSIE ") > 0 || navigator.userAgent.match(
                    /Trident.*rv\:11\./))
            }

        })
    </script>

AOS 실행함수에 위와 같이 소스를 추가해주면 되는데
IE에서는 애니메이션 효과없이 그냥 고정된 형태로 컨텐츠가 보여지므로
완벽한 해결 방법은 아니다.

profile
💻 웹퍼블리셔, UI Developer, Markup Developer 👍

0개의 댓글