Floating Scrollbar For Long Content - jQuery floating-scroll

File Size: 82.1 KB
Views Total: 12318
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 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

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

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

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

<div class="container" data-fl-scrolls='{"orientation": "vertical"}'>
  Long Content Here
// or
  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

7. Hide the floating scrollbar until the user hovers over the content.

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

8. API methods.

// update the scrollbar

// destroy the scrollbar

// destroy floating scrollbar widgets whose containers are not in the document anymore


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


  • v3.0.6: Update the clean-css dependency


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


  • v3.0.4: Fix for vertically scrollable containers


  • v3.0.3: Update dependencies. Rebuild


  • v3.0.2: Fix scrollbar collapse in Safari


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