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.