floating scroll是一个jQuery插件，它在网页底部添加了一个浮动的水平滚动条，这样长的内容（例如，有很多列的大表）在向下滚动时总是可以滚动的。

通过程序包管理器安装：

# Yarn
$ yarn add floating-scroll
 
# NPM
$ npm install floating-scroll --save

如何使用它:

1.jQuery浮动滚动插件需要jQuery库才能正常工作。

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

2.将jQuery浮动滚动插件插件的JavaScript和CSS文件导入到html文件中。

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

3.在目标可滚动内容上启用浮动滚动插件。完成。

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

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

4.您也可以通过初始化插件数据属性：

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

5.确定滚动条的方向。默认为“水平”。

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

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

6.有时您可能需要将浮动滚动条应用于固定元素，如模式弹出：

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

7.隐藏浮动滚动条，直到用户悬停在内容上。

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

8.API方法。

// update the scrollbar
$(".element").floatingScroll("update");
 
// destroy the scrollbar
$(".element").floatingScroll("destroy");
 
// destroy floating scrollbar widgets whose containers are not in the document anymore
$(".element").floatingScroll("destroyDetached");

更新日志：

版本3.2.0（2023-01-10）

• 更新开发依赖项

版本3.2.0（2022-04-09）

• 添加destroyDetached方法，用于查找和销毁小部件的“僵尸”实例。
• 解决问题
• 更新开发依赖项

v3.1.0 (2021-05-08)

• 重建

第3.1.0版（2020-07-18）

• 修复自动初始化程序
• 添加了滚动条方向选项
• 重建

3.0.7版（2019-11-17）

• 修复Mac操作系统上滚动条不可见的问题
• 修复小部件同步问题
• 更新开发依赖项

2019-06-06

• v3.0.6：更新clean css依赖项

2019-05-05

• v3.0.5：将小部件高度调整为本机滚动条高度

2018-11-01

• v3.0.4：修复垂直滚动容器

2018-08-25

• v3.0.3：更新依赖项。重建

2018-05-15

• v3.0.2：修复Safari中的滚动条折叠

2018-04-09

• 执行自动初始化：添加数据fl滚动归因于你的内容并完成。

 

预览截图

长内容 浮动滚动条 jQuery浮动滚动