아하
생활

생활꿀팁

착실한도요291
착실한도요291

웹페이지 smooth scroll

안녕하세요. 웹페이지 개발중인 초보 개발자입니다.

보통 사이트에서 scroll을 내리면 딱딱한 느낌이 나는데 특정 사이트에서는 scroll시 엄청 부드럽게 내려가는데

이번에 업체에서 이 기능을 원하셔서 하루종일 찾아봤습니다. 특정 영역안에서는 구현을 성공했는데

window , document , body에만 기능을 적용시키려고 하니까 preventdefalt 관련 error가 뜨면서 동작 자체가 안합니다.

참고 사이트를 여기에 적어도 될지 몰라서 주소는 안올렸는데 필요하시면 참고 사이트도 올리도록 하겠습니다!

55글자 더 채워주세요.
1개의 답변이 있어요!
  • 신박한가젤26
    신박한가젤26

    질문의 내용을 보았을때 자바스크립트로 구현하신듯한데, 자바스크립트로 구현하시게되면 연산량도 늘어나고 브라우저 퍼포먼스에서 취약성을 갖게됩니다.

    CSS의 scroll-behavior 항목을 사용하시면 부드럽게 사용 가능합니다. 그대신 자바스크립트를 이용해서 스크롤을 추적해야할때에는 원치않는 결과가 나올 수 있으니 충분히 테스트 해보시고 사이트에 적용해보시기 바랍니다.

    호환성 : https://caniuse.com/css-scroll-behavior

    참고문서 : https://developer.mozilla.org/ko/docs/Web/CSS/scroll-behavior