Switch the Html's css on click

I’m building a website in which there are teo ways to scroll

1)scroll snapping

2)traditional

now:

html,body{


 margin: 0;
 
scroll-snap-type:y mandatory ;
flex-direction: column;}

But I want to make button which can turn off scroll sanpping.

I know I can edit css of the body but how to edit the css of the HTML?

>Solution :

Add button with (JavaScript) onclick value:

document.documentElement.style.scrollSnapType = 'none'

html,body{

 margin: 0;
 
scroll-snap-type:y mandatory ;
flex-direction: column;}


div{
  display: flex;
  height: 400px;
  scroll-snap-align: start;
}
button{
  position: fixed;
}

<button onclick="document.documentElement.style.scrollSnapType = 'none';">disable scroll-snap-type</button>
<div style="background:#844"></div>
<div style="background:#484"></div>
<div style="background:#448"></div>