Mozilla 한국 커뮤니티

네이버 검색창 같은 autocomplete를 구현하는 중인데요. xhtml strict로 만들어보고싶은 욕심이 생겨서 iframe을 안쓰고 div 에 overflow:scroll 스타일을 줘서 만들고 있습니다.

검색을 하고, 화살표 키를 누르면 div의 클래스를 변화시켜서 커서가 움직이는 것과 같은 효과를 주었는데, 문제는 지금 표시되어 있는 내용 아래쪽을 보고 싶을 때에는 스크롤바가 자동으로 움직이지 않는다는 겁니다. 그래서....

http://msdn.microsoft.com/workshop/grap ... tmlpos.gif

msdn에서 위 그림을 보고 계산해서 .. div에서 스크롤을 자동으로 이루어지게 만들었습니다.

물론 IE에서는 제대로 아주 제대로 동작하는데 FF에서는 제대로 안되네요.

박스모델처럼 IE와 FF의 계산하는 방법이 틀린가요?

CSS의 position 속성과 offset(top, right, bottom, left)을 사용하시면 브라우져와 상관 없이 구현 할 수가 있습니다.

scrollTop 을 사용해야 하는 특별한 이유가 있나요?

제가 내공이 모자라서 그런지 scrollTop을 쓰면 감춰진 부분을 포함해 지금 선택된(것처럼 보여지는) div의 높이 까지를 구할 수 있어서요..

정작 문제가 발생한 부분은 scrollTop이 아니라(scrollTop은 IE,FF다 잘 동작합니다.) offsetTop 에서 발생했습니다.

지금이야 문제를 해결하기는 했지만, offsetTop을 해주면 익스는 parent가 되는 div안쪽에서 this div의 위까지 픽셀을 계산해서 보여주는데

불여우에서는 offsetTop을 해주면 body에서부터 this div의 위까지 픽셀을 계산하더라구요.


offsetTop을 안쓰는 방법으로 해결은 했지만 궁금하잖아요; ㅎㅎ