Tengo una pregunta aparentemente básica que no puedo encontrar ningún recurso en lo que estoy tratando de lograr. Soy nuevo en JavaScript y bastante mediocre en CSS.
Lo que estoy tratando de lograr es esto. Una página que se puede mostrar en una pantalla de TV que muestra una lista de resultados deportivos, que se desborda a la derecha. Quiero que la página desplace automáticamente ese div hacia la derecha (que tiene una longitud dinámica que depende de la cantidad de contenido) para que pueda ver todas las puntuaciones en todas las divisiones y desplazar automáticamente el contenido hacia la derecha. Cuando llegue al final, haga una pausa y luego actualice (usando Ajax) volviendo al principio.
Estoy seguro de que si se me puede señalar en la dirección de las funciones correctas para usar, puedo unir las distintas partes.
Aquí hay un ejemplo de algo que estoy tratando de ejecutar en la carga de la página que me gustaría desplazar sin problemas hasta el final en el transcurso de 10 segundos, simplemente no puedo encontrar la forma de identificar/establecer el "final" del div .
$('#ScrollMe').animate({ scrollX: ??? //To div end; }, 10000);Creo que si puedo resolver esta parte, puedo resolver el resto.
¿Algún consejo? Javascript, CSS... ¡abierto a todo!
Puede usar la propiedad .scrollWidth para determinar qué tan lejos se debe desplazar, restar el ancho visible le dará un punto final más preciso, por ejemplo:
(estilos y tiempo de animación configurados en 2 s, solo para demostrar lo que está sucediendo)
$("#scrollMe").animate({ scrollLeft: ($("#scrollMe")[0].scrollWidth - $("#scrollMe").width()) + "px" }, 2000); #scrollMe { width: 100%; border:1px solid blue; overflow:auto; } #inner { width: 6000px; border:5px solid red; height:20px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id=scrollMe> <div id=inner> </div> </div>Solo necesita aplicar overflow: scroll css property, al div que desea "desbordar" el ancho de la página. Por lo tanto, agregará una barra debajo del div, como la barra de desplazamiento predeterminada de cada navegador.
parentDivWithContentToOverflow{ Overflow: scroll; }Este es un gran ejemplo de lo que necesitas.
https://css-tricks.com/snippets/jquery/smooth-scrolling/
Pero debe especificar el div para lograr esto.
Si su requisito es solo desplazarse hasta el final de la página (que es correcto), entonces puede usar su ejemplo. Pero debe especificar la ubicación del píxel para desplazarse hacia la derecha. Para eso, es posible que necesite algo como lo siguiente.
function getWidth(){ return Math.max(document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth, document.documentElement.clientWidth); }El fragmento de código anterior fue robado de esta respuesta 😁 https://stackoverflow.com/a/59520378/4972683