Necesito crear una barra de desplazamiento flotante horizontal en mi página porque tengo una tabla que es demasiado grande.
Una búsqueda rápida en Google me llevó a esta publicación, [https://stackoverflow.com/questions/24552684/possible-to-have-a-floating-horizontal-scrollbar] que sugería un complemento de desplazamiento flotante de jquery.
Después de esto, encontré la versión independiente sin dependencia Handy-scroll: [https://github.com/Amphiluke/handy-scroll].
Sin embargo, parece que no puedo hacerlo funcionar, después de (creo) seguir correctamente las instrucciones.
>npm install handy-scroll , agregué los archivos handy-scroll.css y handy-scroll.min.js al mismo directorio, creé un elemento con id="spacious-container" y luego agregué la línea handyScroll.mount(document.getElementById('spacious-container'); pero sigo recibiendo un error en handy-scroll.min.js.
Este es mi código:
<html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="handy-scroll.css"> <script src="handy-scroll.min.js"></script> </head> <body> <div id="spacious-container"> <div style="background-color: #0f0; width: 3000px; height: 200px; border: 2px solid #000;"></div> </div> </body> <script> // Widget Initialization handyScroll.mount(document.getElementById('spacious-container')); </script> <html>Y estos son los dos errores que me sale:
handy-scroll.min.js:6 Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll') at Object.$$ (handy-scroll.min.js:6:722) at Object.init (handy-scroll.min.js:6:790) at handy-scroll.min.js:6:3085 at Array.forEach (<anonymous>) at Object.mount (handy-scroll.min.js:6:3011) at test.html:15:20 handy-scroll.min.js:6 Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll') at Object.$$ (handy-scroll.min.js:6:722) at Object.mount (handy-scroll.min.js:6:3005) at handy-scroll.min.js:6:3592 at HTMLDocument.<anonymous> (handy-scroll.min.js:6:525)Como siempre, estoy seguro de que he hecho algo estúpido, pero ni siquiera sé cómo solucionarlo. El handy-scroll.min.js está minificado y no puedo entenderlo. Creo que seguí el LÉAME al pie de la letra, pero todavía no tuve suerte. He buscado ejemplos y tutoriales en línea, pero todos son copias palabra por palabra de la página de github.