웹사이트에 사용자가 어디위치 콘텐츠를 보고있는지 사용자 편의를 높여줄 수있는 scroll 이벤트를 다루는 방법입니다.
github에서 Sourse 입니다!
https://github.com/yoogukhyeon/vanilla_javascript
javascript 사용해서 scroll일 경우 각 Element 요소에 active 사용방법 입니다.
See the Pen Scroll Active by 유국현 (@yoogukhyeon) on CodePen.
웹브라우저에서 현재 화면의 스크롤 정보를 알아야 할 경우에 사용하는 속성
* 브라우저간 호환성을 위해서는 window.scrollY 대신 window.pageYOffset을 사용하세요.
HTML 요소에 높이나 너비를 구해야할 경우 많이 쓰이는 속성
offsetWidth, offsetHeight
높이, 넓이를 구할때 padding, border의 값이 포함된 값인지 아닌지를 고려해서 값을 구해야 합니다.
그래서 offsetWidth, offsetHeight는 padding, border 값을 포함한 HTML 요소에 높이를 가져와서 많이 사용된다.
'Html & Css' 카테고리의 다른 글
| 반응형 웹, min-width vs max-width 정리해보며... (6) | 2022.09.08 |
|---|---|
| css 활용한 기본적인 hover 기능 구현 (11) | 2022.07.25 |
| 개발에서 가장 중요한 html 네이밍 컨벤션 (2) | 2022.07.05 |
| Jquery 활용한 modal창 만들기 (2) | 2022.01.06 |