[HTML/CSS/JS] 스크롤 켜기, 끄기

위 예시처럼 버튼을 키고 끔에 따라 웹의 오른쪽에 있는 스크롤 바가 켜고 꺼지는 것을 구현해보자.
html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--제이쿼리 추가-->

<button class="btn-turn-off-scroll-bar">스크롤바 끄기</button>
<!--스크롤 키는 버튼-->
<button class="btn-turn-on-scroll-bar">스크롤바 켜기</button>
<!--스크롤 끄는 버튼-->
<div></div>
<!--overflow시키기 위한 배경-->

css

div {
  background-color:blue;
  min-height:250vh;
}
/*스크롤을 내릴 수 있게 높이를 250vh로 설정한다.*/


/*html에 overflow-hidden클래스를 추가하면 속성이 적용되도록 선택자 작성*/
html.overflow-hidden,
html.overflow-hidden > body {
  overflow:hidden;
  /*원래대로라면 overflow의 기본값은 auto이다. div의 높이가 
  250vh인 div때문에 자동적으로 html,body에 스크롤바가 생겨야 하는데
  이 속성이 적용되면 overflow되는 것들을 숨기기 때문에 스크롤 바가
  생기지 않는다.*/
}

JS

console.clear();
$('.btn-turn-off-scroll-bar').click(function(){
  $('html').addClass('overflow-hidden');
});
/*.btn-turn-off-scroll-bar(스크롤바 끄기 버튼)를 클릭하면
html태그에 .overflow-hidden(스크롤바를 없애는 기능)클래스를 추가한다.*/
$('.btn-turn-on-scroll-bar').click(function(){
  $('html').removeClass('overflow-hidden');
});
/*.btn-turn-on-scroll-bar(스크롤바 켜기 버튼)를 클릭하면
html태그에게서 .overflow-hidden(스크롤바를 없애는 기능)클래스를 제거한다.*/