The scroll-behavior property for CSS specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs.
Other scrolls, such as those performed by the user, are not affected by this property.
object.style.scrollBehavior = "value"; <'scroll-behavior'> = auto | smooth auto The scrolling box is scrolled in an instant fashion.
smooth The scrolling box is scrolled in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time.
<!doctype html>
<html>
<head>
<style>
.myclass
{
height: 50vh;
overflow-y: scroll;
scroll-behavior: smooth;
width: 50%;
}
.myclass > div
{
height: 100%;
}
</style>
</head>
<body>
<a href="#myid1">1</a>
<a href="#myid2">2</a>
<a href="#myid3">3</a>
<div class="myclass">
<div id="myid1">smooth1</div>
<div id="myid2">smooth2</div>
<div id="myid3">smooth3</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass
{
height: 50vh;
overflow-y: scroll;
width: 50%;
}
.myclass > div
{
height: 100%;
}
</style>
</head>
<body>
<button>initial</button>
<button>auto</button>
<button>smooth</button><br>
<a href="#myid1">1</a>
<a href="#myid2">2</a>
<a href="#myid3">3</a>
<div class="myclass">
<div id="myid1">scroll-behavior1</div>
<div id="myid2">scroll-behavior2</div>
<div id="myid3">scroll-behavior3</div>
</div>
<script>
function myfunction(myparameter)
{
document.querySelector(".myclass").style.scrollBehavior = myparameter.target.innerHTML;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>