Floating Scrollbar For Long Content - jQuery floating-scroll

floating-scroll is a jQuery plugin which appends a floating horizontal scrollbar to the bottom of the webpage so the long content (e.g. large table with tons of columns) will always be scrollable as you scroll down.

Install it via package managers:

# Yarn
$ yarn add floating-scroll

# NPM
$ npm install floating-scroll --save

How to use it:

1. The jQuery floating-scroll plugin requires jQuery library to work properly.

<script src="//code.jquery.com/jquery.min.js"></script>

2. Import the jQuery floating-scroll plugin plugin's JavaScript and CSS files into the html file.

<link href="dist/jquery.floatingscroll.css" rel="stylesheet">
<script src="dist/jquery.floatingscroll.min.js"></script>

3. Enable the floating-scroll plugin on the target scrollable content. Done.

<div class="container">
  Long Content Here
</div>

$(".container").floatingScroll();

4. You can also initialize the plugin via data attribute:

<div class="container" data-fl-scrolls>
  Long Content Here
</div>

5. Determin the scrollbar orientation. Defaults to 'horizontal'.

<div class="container" data-fl-scrolls='{"orientation": "vertical"}'>
  Long Content Here
</div>

// or
$(".container").floatingScroll({
  orientation: "vertical"
});

6. Sometimes you might need to apply the floating scrollbar to a fixed element such as 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 methods.

// update the scrollbar
$(".element").floatingScroll("update");

// destroy the scrollbar
$(".element").floatingScroll("destroy");

// destroy floating scrollbar widgets whose containers are not in the document anymore
$(".element").floatingScroll("destroyDetached");

Changelog:

v3.2.0 (2024-01-21)

• CSS Updated

v3.2.0 (2024-01-04)

• Miscellaneous minor improvements

v3.2.0 (2023-01-10)

• Update dev dependencies

v3.2.0 (2022-04-09)

• Add the method destroyDetached for finding and destroying “zombie” instances of the widget.
• Fix the issue
• Update dev dependencies

v3.1.0 (2021-05-08)

• Rebuild

v3.1.0 (2020-07-18)

• Fix auto-initialisator
• Added scrollbar orientation option
• Rebuild

v3.0.7 (2019-11-17)

• Fix scroll bar invisibility issue on Mac OS
• Fix widget syncing issue
• Update dev dependencies

2019-06-06

• v3.0.6: Update the clean-css dependency

2019-05-05

• v3.0.5: Fit widget height to the native scroll bar height

2018-11-01

• v3.0.4: Fix for vertically scrollable containers

2018-08-25

• v3.0.3: Update dependencies. Rebuild

2018-05-15

• v3.0.2: Fix scrollbar collapse in Safari

2018-04-09

• Implement auto-initialisation: add the data-fl-scrolls attribute to your content and done.

 

---

This awesome jQuery plugin is developed by Amphiluke. For more Advanced Usages, please check the demo page or visit the official website.