Tengo un scroll horizontal en mi pagina web, en el body, y su scroll se nota muy torpe ¿Cómo hacer que la transición se sienta suave a la vista?. Simplificando un ejemplo parecido seria como este: "ejecuten"
NOTA: le puse -200, 200 para que se note mejor el efecto torpe que quiero suavizar.
const element = document.querySelector("#container");
element.addEventListener('wheel', (event) => {
event.preventDefault();
element.scrollBy({
left: event.deltaY < 0 ? -200 : 200, //es un operador condicionl(ternario)- condition ? val1 : val2
});
});
#container {
display: flex;
overflow-x: scroll;
max-width: 50rem;
margin: 0 auto;
}
#container p {
font-family: sans-serif;
border-radius: 8px;
background: #ff6961;
color: white;
padding: 2rem 3rem;
margin: 2rem 1rem;
}
<div id="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>