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

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

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

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

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

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

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

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

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

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

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