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.

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.

floating horizontal scrollbar, floating scrollbar example, floating horizontal scrollbar, floating vertical scrollbar css, html table floating scrollbar, transparent scrollbar over content

đŸ’¡ 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.

Install it by way of bundle managers:

# Yarn
$ yarn add floating-scroll

# NPM
$ npm install floating-scroll --save

How to make use of it:

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

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

// update the progress bar
$(".element").floatingScroll("update");

// destroy the progress bar
$(".element").floatingScroll("destroy");

Floating Scrollbar For Long Content, floating-scroll Plugin/Github, css scrollbar overlaps content


See Demo And Download

Official Website(Amphiluke): Click Here

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

Related Posts

Iconpicker-Bootstrap-5

[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…

bootstrap-multiple-image-upload-with-preview

Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…

Animating-Split-Flap-Displays-fallblatt

A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

jQuery-SyoTimer-Plugin

jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…

vue-js-periodic-table

Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…