Ben Holness
Ben Holness

Reputation: 2717

Is it possible to set easing for scroll-behavior: smooth in CSS?

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

Answers (0)

Related Questions