1

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>

2 respuestas 2

1

Para la forma JavaScript solo hacia falta agregar behavior: 'smooth'

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
    behavior: 'smooth'
    
  });
});
#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>

0

Una solución muy sencilla es usar CSS, hay una propiedad específica para lo que quieres:

scroll-behavior: smooth;

Aplicada a tu código de ejemplo:

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;
  scroll-behavior: smooth;
}
 
#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>

1
  • 1
    gracias por el dato, me puse a revisar y encontré la forma JavaScript;
    – kraud
    Commented el 21 ene. 2022 a las 18:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.