스크롤 크로스 브라우징

§

[일단 랭커님께 공개적으로 사과부터 드리겠습니다. ^^;;]

전에 제가 랭커님께 저도 쓰고 있는 js 스크립트를 공유해 드리며 이 스크립트가 IE 에서 작동하지 않는다는 사실을 알아차리지 못한 부분이 있었습니다.

브라우져의 스크롤을 하단으로 내리면 해당 div 의 class 가 바뀌는 간단한 스크립트 인데, 제가 사용한 구문 중에

var scrollpos = window.scrollY;

scrollpos 으로 적은 스크롤 위치에 var 을 단순하게 window.scrollY 으로 잡은게 문제 였습니다.

IE9 이하 대응은 하지 않아도 되는 플젝이였고, 저는 window.scrollY 가 IE10 부터는 IE 에서 작동을 한다고 착각을 했던 것 같습니다.

문서다시 살펴보니, IE9 이하가 아니라 모든 IE 에서 window.scrollY 는 작동을 안하는…. 허얼…

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY

왜 이런 착각을 하고 있었는지 참나….

암튼, 해결책은 window.scrollY 를 IE 도 인식을 하는 window.pageYOffset 나, document.documentElement.scrollTop 으로 바꿔줄수도 있지만, 그렇게 하면 IE 때문에 정식 API 를 사용안하고 alias 를 쓰게 되는거라 맘에 들지 않고…..

그래서 저는 OR operator 를 사용했습니다. 이렇게.

var scrollpos = window.scrollY || window.pageYOffset

정말 어이없는 실수를 한건데, 변명을 하자면 제가 랭커님께 공유해드렸던 스크립트는 오래전 제가 모바일 UI 개발할때 부터 사용하던거라, 모바일 쪽에서는 문제가 없었어서 크로스브라우징이 안된다는 인식을 하기가 어려웠던… ㅠㅠㅠㅠ

혹시라도 window.scrollY 가 IE 에서 먹히지 않아서 고생하고 계시는 개발자분들이 계시다면 이글이 유용할지도 몰라서 짤막하게 관련 내용을 적었습니다.

p.s. 정말 미스테리인게, 이 플젝 클라분도 그렇고, 랭커님도 그렇고, 여기에 대해 지금까지 아무도 인식을 못하신… 그래서 클레임도 안들어온… 클라분도 IE 브라우져를 사용 안하시는건지…. ㅋㅋㅋㅋ

랭커님이 이 문제 저한테 언급 하셨었다네요. 그리고 저는 안될리가 없다고 했었고.. 헐…

window.scrollY 는 IE9 에서 작동 안한다는 글을 매우 오래전에 읽었고, 그래서 저 혼자 그럼 IE10 부터는 작동을 한다고 착각을 하고, Edge 에서만 크로스 브라우징 확인을 했던 것 같습니다. 참 황당한 실수를 한건데, 여기서 제가 얻는 교훈은, “항상 문서확인을 확실히 하자” 인 것 같습니다. ㅠㅠㅠㅠ

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , , ,

카테고리:

Ω

2 Comments

  • bastcode says:

    그냥 IE를 어떻게 좀 해줘요… 가 근본적인 문제이긴 하죠 ( ..)
    크롬은 지구가 동그랗다고 알고 있지만, IE는 네모랗게 밖에 모르죠.

    • Matthew says:

      “크롬은 지구가 동그랗다고 알고 있지만, IE는 네모랗게 밖에 모르죠.”

      네, IE 는 border-radius 를 모르는 병신이라서 그거 고쳐준다고 pie.htc 를 달아주곤 했었죠.

      pie.htc 를 달아주면 IE 도 동그라미를 알게 되니까.

      그런데 pie.htc 를 달아주면 그렇지 않아도 느린 IE 속도가 더 느려져서, 더 병신이 된다는게 함정. ㅋㅋㅋ

      IE 대응하느라 밤늦게 까지 개삽질 하다가 정말 살인충동 느낀게 한두번이 아니었습니다. (총들고 마소에 찾아가서 IE 만든 새끼들 다 쏴죽여버리는 상상을 하곤 했었죠.)

      이제는 좀 살만한게, 천조국에서는 IE11 이하는 이제 대응을 안해줘도 된다는…

      한국개발자분들은 앞으로도 최소 4-5년은 더 개삽질하셔야 할텐데, 참 저도 마음이 아픕니다. ㅠㅠㅠㅠ

Leave a Reply

Your email address will not be published. Required fields are marked *