Floating scrolling – the crux of the issue – The general purpose of the plugin is to provide some tall containers on the page with a separate horizontal (or vertical) scroll bar, which does not disappear from view when scrolling the entire page. Therefore, the user will always be able to scroll the container even if their scroll bar is outside the viewport.
The floating scroll is a jQuery plug-in that appends a floating horizontal scroll bar to the bottom of a web page so that long content (such as a large table with a large number of columns) is always scrollable while scrolling down.
💡 Tips:
- Floating Scrolling is a jQuery plugin. If you are looking for a dependency-free standalone unit with similar functionality, please check the manual scrolling for the sibling project instead.
- Vue-based app development? Consider using the vue-handy-scroll component.
Must Read: Minimalistic Custom Slider Scrollbar Plugin | Perfect slider
Floating Scroll Slider jQuery Plugin Details
Post Name | Floating Scroll Slider Plugin |
Author Name | Amphiluke |
Category | Scrolling, Slider |
Official Page | Click Here | Click Here |
Official Website | github.com |
Publish Date | May 9, 2021 |
Last Update | July 16, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
1. The floating-scroll plugin requires the jQuery library.
<script src="//code.jquery.com/jquery.min.js"></script>
2. Import the jQuery floating-scroll plugin’s JavaScript and CSS information into the HTML file.
<link href="jquery.floatingscroll.css" rel="stylesheet"> <script src="src/jquery.floatingscroll.js"></script>
3. Enable the floating-scroll plugin on the goal scrollable content.
<div class="container"> Long Content Here </div>
$(".container").floatingScroll();
4. You also can initialize the plugin by way of data
attribute:
<div class="container" data-fl-scrolls> Long Content Here </div>
5. Determine the scrollbar orientation.
<div class="container" data-fl-scrolls='{"orientation": "vertical"}'> Long Content Here </div>
// or $(".container").floatingScroll({ orientation: "vertical" });
6. Sometimes you may want to use the floating scrollbar to a set component similar to modal popup:
<div class="fl-scrolls-viewport"> <div class="fl-scrolls-body"> <div class="container"> Long Content Here </div> </div> </div>
7. Hide the floating scrollbar until the user hovers over the content.
<div class="container" data-fl-scrolls fl-scrolls-hoverable> Long Content Here </div>
8. API.
// update the progress bar $(".element").floatingScroll("update"); // destroy the progress bar $(".element").floatingScroll("destroy");
The currently supported methods are
init
 (default value) — used to initialize a floating scrollbar widget.update
 — used t force update of the floating scrollbar parameters (size and position).destroy
 — removes a scrollbar and all related event handlers.destroyDetached
 — destroys floating scrollbar instances whose containers were removed from the document (requires a different context).
See Demo And Download

Official Website(Amphiluke): Click Here
This superior jQuery/javascript plugin is developed by Amphiluke. For extra Advanced Usage, please go to the official website.