Blog/CSS
스크롤 앵커링: 더보기 버튼이 이상했'었'던 이유 (overflow-anchor)
프롤로그 왜 제목이 저러냐면요... 얼마 전까지 ‘더보기’ 버튼이 생각과는 다르게 동작한 적이 있‘었’습니다. 위와 같이 더보기 버튼을 클릭하면 그 위로 아이템을 추가하는 형식의 UI였는데, 이상하게 버튼이 고정된 채로 버튼 위에서 새로운 아이템이 추가됐었거든요. 기획: "더보기 버튼을 누르면 추가 영역이 아래에 펼쳐지는 게 아니라 위로 올라가는 느낌이 들어요." 디자인: "그러게요. 버튼은 고정이고 내용이 위에서 열리는 형식 같은데... 밑으로 열리게 가능한가요?" UI개발: ???? 확인해보니까 다른 브라우저에선 해당 현상이 없고, Chrome 브라우저에서만 버튼 또는 a 태그와 같은 포커스가능 요소를 클릭한 경우 해당 현상이 발생했습니다. 또, 돔 추가뿐만 아니라 display나 max-height..
2020. 11. 22.
