Lightweight jQuery Plugin Provides Floating Scroll Slider Functionality

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 NameFloating Scroll Slider Plugin
Author NameAmphiluke
CategoryScrolling, Slider
Official PageClick Here | Click Here
Official Websitegithub.com
Publish DateMay 9, 2021
Last UpdateJuly 16, 2023
DownloadLink Below
LicenseMIT

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

floating-scroll-slider-plugin

Official Website(Amphiluke): Click Here

This superior jQuery/javascript plugin is developed by Amphiluke. For extra Advanced Usage, please go to the official website.

Related Posts

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *