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.
