Question

0

170

Visualizações

How to begin using handy-scroll?

I need to create a horizontal, floating scrollbar on my page because I have table which is too large.

A quick google search led me to this post, [https://stackoverflow.com/questions/24552684/possible-to-have-a-floating-horizontal-scrollbar] which suggested floatingscroll, a jquery plugin.

Following this, I found the standalone dependency-free version Handy-scroll: [https://github.com/Amphiluke/handy-scroll].

However, I can't seem to get it working, after (I believe) correctly following the instructions.

I ran >npm install handy-scroll, added the handy-scroll.css and handy-scroll.min.js files to the same directory, created an element with id="spacious-container" and then added the line handyScroll.mount(document.getElementById('spacious-container'); but I keep getting an error in the handy-scroll.min.js.

This is my code:

<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>

And these are the two errors I get:

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)

As always, I'm sure I've done something stupid but I don't even know how to go about troubleshooting it. The handy-scroll.min.js is minified and I can't understand it. I believe I followed the README to a tee, but still no luck. I've looked for examples and tutorials online but they're all word-for-word copies of the github page.

about 4 years ago · Santiago Gelvez

Responde à pergunta

0

170

How to begin using handy-scroll?

Encontrar trabalhos remotos

Andres GPT