Is there a way to achieve a cool scroll effect that locks each div id on the page? I'm unsure of how to do this. Check out the project at
I've removed the CSS as it's unnecessary, but you can still view the project on repl.it here: https://repl.it/@IAmNotRegis/test#index.html
<!DOCTYPE html>
<html>
<body>
<!-- Load user defined styles -->
<link href="style.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="script.js"></script>
<div id="carousel" class="snap">
<div id="carousel-1">Item 1<br>Start scrolling ...</div>
<div id="carousel-2">Item 2</div>
<div id="carousel-3">Item 3</div>
</div>
<div id="controls">
<button onclick="toggleSnap()">Turn Snapping <span id="otherSnappingState">off</span></button>
<button onclick="toggleDirection()">Change scroll to <span id="otherScrollState">vertical</span></button>
</div>
</body>
</html>
function toggleSnap() {
var snapEnabled = document.getElementById('carousel').classList.toggle('snap');
document.getElementById('otherSnappingState').innerText = snapEnabled ? 'off' : 'on';
}
function toggleDirection() {
var isVertical = document.getElementById('carousel').classList.toggle('vertical');
document.getElementById('otherScrollState').innerText = isVertical
}
#carousel {
/* Ensure that the contents flow horizontally */
overflow-x: auto;
white-space: nowrap;
display: flex;
}
#carousel.vertical {
flex-direction: column;
}
/* 2018 spec - For Safari 11, Chrome 69+ */
#carousel.snap {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
}
#carousel.snap > div {
scroll-snap-align: center;
}
#carousel.snap.vertical {
flex-direction: column;
scroll-snap-type: y mandatory;
}
/* 2015 spec - For Firefox, Edge, IE */
#carousel.snap {
scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
-ms-scroll-snap-points-x: repeat(100%);
}
#carousel.snap.vertical {
scroll-snap-points-x: initial;
-ms-scroll-snap-points-x: initial;
scroll-snap-points-y: repeat(100%);
-ms-scroll-snap-points-y: repeat(100%);
}