I'm building a website in which there are two ways to scroll
Scroll Snapping
Traditional
Current code
html,body{
margin: 0;
scroll-snap-type:y mandatory ;
flex-direction: column;
}
But I want to make button which can turn off scroll snapping.
I know I can edit the CSS of the body, but how to edit the CSS of the HTML?
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>Create a button in your HTML to toggle scroll snapping:
<button id="toggleScrollSnapping">Toggle Scroll Snapping</button>
Add an event listener to the button to toggle the scroll snapping behavior:
const toggleButton = document.getElementById('toggleScrollSnapping');
const htmlElement = document.documentElement;
toggleButton.addEventListener('click', () => {
htmlElement.classList.toggle('scroll-snapping-disabled');
});
Define your CSS rules to enable or disable scroll snapping based on the class applied to the element:
html {
/* ... other CSS rules ... */
}
body {
margin: 0;
flex-direction: column;
}
.scroll-snapping-enabled {
scroll-snap-type: y mandatory;
}
.scroll-snapping-disabled {
scroll-snap-type: none;
}
Apply the CSS class to the element when the button is clicked:
toggleButton.addEventListener('click', () => {
htmlElement.classList.toggle('scroll-snapping-disabled');
htmlElement.classList.toggle('scroll-snapping-enabled');
});
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:#951"></div>
<div style="background:#100"></div>
<div style="background:#890"></div>Using a checkbox with a has selector to enable and disable a css rule based on the checkbox state.
.slider {
display: flex;
}
body:has(#snap:checked) .slider
{
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
}
section {
min-width: 100vw;
height: 100vh;
scroll-snap-align: start;
text-align: center;
}<input type="checkbox" id="snap" /><label for="snap">Snap It</label>
<div class="slider">
<section>
<h1>Section One</h1>
</section>
<section >
<h1>Section Two</h1>
</section>
<section>
<h1>Section Three</h1>
</section>
<section>
<h1>Section Four</h1>
</section>
<section>
<h1>Section Five</h1>
</section>
</div>