Подскажите, почему не удаляется класс с боди?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<ul class="buttons">
<li class="btn__scrolling-on">
<button>Можно скролить</button>
</li>
<li class="btn__scrolling-off">
<button>Нельзя скролить</button>
</li>
</ul>
<article class="content">
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</article>
</body>
<script>
const btnOn = document.querySelector('.btn__scrolling-on button');
const btnOff = document.querySelector('.btn__scrolling-off button');
let body = document.body;
function disableScroll() {
body.classList.add('disable-scroll');
}
function enableScroll() {
body.classlist.remove('disable-scroll');
}
btnOff.addEventListener('click', (event) => {
disableScroll();
event.currentTarget.style.pointerEvents = 'none';
btnOn.style.pointerEvents = 'auto';
});
btnOn.addEventListener('click', (event) => {
enableScroll();
event.currentTarget.style.pointerEvents = 'none';
btnOff.style.pointerEvents = 'auto';
});
</script>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
}
button {
cursor: pointer;
}
.buttons {
display: inline-flex;
position: fixed;
}
.buttons li {
padding: 20px;
list-style: none;
}
.buttons button {
width: 100px;
height: 50px;
font-size: 15px;
font-weight: bold;
border: 2px solid black;
border-radius: 30px;
}
article section {
width: 100%;
height: 50vh;
border: 2px solid black;
}
article section:nth-child(1) {
background: hotpink;
}
article section:nth-child(2) {
background: khaki;
}
article section:nth-child(3) {
background: lightgreen;
}
article section:nth-child(4) {
background: firebrick;
}
article section:nth-child(5) {
background: fuchsia;
}
.disable-scroll {
position: relative;
overflow: hidden;
height: 100vh;
}
