The scroll-snap-stop CSS property 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 onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">normal</button>
<button onmouseover="myfunction(innerHTML)">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)
{
const myelements = document.querySelectorAll(".myclass > div");
for(let myelement of myelements)
{
myelement.style.scrollSnapStop = myparameter;
}
}
</script>
</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)
{
const myelements = document.querySelectorAll(".myclass > div");
for(let myelement of myelements)
{
myelement.style.scrollSnapStop = myparameter;
}
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
}
</script>
</body>
</html>