회사에서 한 프로젝트가 IE11 을 버리기로 했다.(내부 admin 시스템은 사용자가 사용하는게 아니라서 크롬에 최적화 해서 사용하고 있었다. 그런데 사용자 사이트는 누가 사용할지 모르기 때문에 IE11을 지원하고 있었다.) 이제는 IE11 때문에 사용 못했던 코드를 더욱 가감하게 사용할 수 있게 되었다. (물론 다른 프로젝트는 아직 IE11을 유지하고 있다. )
이렇게 해서 여러가지 일을 처리하다 기존에는 관심을 가지지 않았던 신기한 JS 함수를 알게 되었다.
IntersectionObserver 라고 해서 특정 element 가 화면에 viewport 에 보여주는지 여부를 알려주는 함수가 존재했다. 전에 이러한 기능을 구현하려고 했으면 timeout 함수로 주기적으로 element 가 어디에 위치하는지 검사 해야 했다. 그런데 이 함수가 있으면 그 것보다는 효율적으로 적절하게 이벤트를 호출해 주는 것 같다. 이 기능을 이용해서 특정 element 가 현재 viewport 를 기준으로 위에 존재하는지, viewport 에 보이는지, viewport 아래에 위치하는지 확인 할 수 있는 기능을 사용할 수 있다.
https://stackoverflow.com/a/58981159/6652082