스크롤하면 moveToTop 버튼 띄우기

사이트를 스크롤 하면 보이지 않던 화살표 버튼이 서서히 나타나도록 만들고 있었다.
그런데.. visibility 속성으로 scroll이벤트에 따라 변화를 주었더니 적용이 되지 않아서 opacity로 주었는데 문제가 있었다.

해당 영역에 그대로 존재하지만 투명해졌을 뿐이기 때문에,

• 아래 Gif처럼 마우스를 올렸을 때 커서가 포인터로 바뀌고
• 클릭도 가능하다...!
  

이 문제를 방지하기 위해서 어떻게 해야할까?

pointer-events

pointer-events CSS 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 지정한다.

공식문서 내용

auto

요소가 pointer-events 속성을 지정하지 않은 것처럼 행동합니다. SVG 콘텐츠에서는 auto와 visiblePainted가 동일한 효과를 지닙니다.

none

요소가 포인터 이벤트의 대상이 되지 않습니다. 그러나 해당 요소의 자손이 다른 pointer-events 값을 지정한 경우, 그 자손은 대상이 될 수 있습니다. 이 때는 이벤트 캡처/버블 (en-US) 단계에서 none을 지정한 요소의 이벤트 처리기를 발동할 수 있습니다.

css

.arrow-button {
  opacity: 0;
  transition: all 0.3s ease-in;
  pointer-events: none; //arrow-buton 클래스일 떄는 pointer-events가 적용되지 않도록 설정
}

.arrow-button-show {
  opacity: 100%;
  cursor: pointer;
  pointer-events: auto; //arrow-button-show 클래스일 때는 pointer-events 적용
}

Reference

https://developer.mozilla.org/ko/docs/Web/CSS/pointer-events