The scroll-snap-stop property for CSS allows such a possible snap position to "trap" the scrolling operation, forcing the scroll container to stop before the scrolling operation would naturally end.
object.style.scrollSnapStop = "value"; <'scroll-snap-stop'> = normal | always normal The scroll container may pass over a snap position defined by this element during the execution of a scrolling operation.
always The scroll container must not pass over a snap position defined by this element during the execution of a scrolling operation; it must instead snap to the first of this element's snap positions.
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: grid;
grid-template-columns: repeat(3, 100%);
grid-template-rows: repeat(3, 100%);
height: 50vh;
overflow: scroll;
scroll-snap-type: both mandatory;
width: 50%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
scroll-snap-align: start;
scroll-snap-stop: always;
}
</style>
</head>
<body>
<div class="myclass">
<div>always</div>
<div>always</div>
<div>always</div>
<div>always</div>
<div>always</div>
<div>always</div>
<div>always</div>
<div>always</div>
<div>always</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: grid;
grid-template-columns: repeat(3, 100%);
grid-template-rows: repeat(3, 100%);
height: 50vh;
overflow: scroll;
scroll-snap-type: both mandatory;
width: 50%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
scroll-snap-align: start;
}
</style>
</head>
<body>
<button>initial</button>
<button>normal</button>
<button>always</button>
<div class="myclass">
<div>scroll-snap-stop</div>
<div>scroll-snap-stop</div>
<div>scroll-snap-stop</div>
<div>scroll-snap-stop</div>
<div>scroll-snap-stop</div>
<div>scroll-snap-stop</div>
<div>scroll-snap-stop</div>
<div>scroll-snap-stop</div>
<div>scroll-snap-stop</div>
</div>
<script>
function myfunction(myparameter)
{
for(const mydiv of document.querySelectorAll(".myclass > div"))
{
mydiv.style.scrollSnapStop = myparameter.target.innerHTML;
}
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>