Reputation: 2717
I have a div
with overflow-y:auto;
set. Some javascript scrolls that div
to specific positions based on user input.
In the CSS for the div, I have scroll-behavior: smooth;
.
I would like to be able to customize the easing for the smooth scrolling. Is there any way to set the easing to cubic-bezier(0.42, 0, 0.58, 1)
, or ease-out
etc., with just CSS?
Simplified example snippet:
document.getElementById("scroll").addEventListener("click", function() {
if (document.getElementById("container").scrollTop===0) {
document.getElementById("container").scrollTop=100;
}
else {
document.getElementById("container").scrollTop=0;
}
});
#container {
min-height: 100px;
max-height: 100px;
display: flex;
flex-direction:column;
overflow-y: auto;
border: 1px solid black;
margin-bottom:10px;
scroll-behavior: smooth;
}
#container > div:nth-child(odd){
background: #efefef;
}
<div id="container">
<div>row 1</div>
<div>row 2</div>
<div>row 3</div>
<div>row 4</div>
<div>row 5</div>
<div>row 6</div>
<div>row 7</div>
<div>row 8</div>
<div>row 9</div>
<div>row 10</div>
</div>
<button id="scroll">Scroll</button>
Upvotes: 0
Views: 135