Bootstrap-layout-scrollable 是一款基于 Bootstrap 的滚动布局插件，它非常适用于页面上需要滚动显示的大量内容。本文将为大家介绍 bootstrap-layout-scrollable 的使用和配置方法。
安装
运行以下命令安装 npm 包：
npm install bootstrap-layout-scrollable --save
配置
引入样式
在 html 中引入 bootstrap-layout-scrollable 样式文件：
<link rel="stylesheet" href="./path/to/bootstrap-layout-scrollable/css/bootstrap-layout-scrollable.css">
引入 js
在 html 中引入 bootstrap-layout-scrollable.js：
<script src="./path/to/bootstrap-layout-scrollable/js/bootstrap-layout-scrollable.js"></script>
HTML 结构
你需要定义一个 Bootstrap 的 container，然后根据你的具体布局使用 row、col 类来布局内容。最后，你需要将 row 元素包裹在 scrollable 类中，这样 scrollable 内容将具有滚动条。
-- -------------------- ---- -------
---- ------------------
---- -------------------
---- ------------
---- --------------------------
---- --------------------------
------
---- ------------
---- --------------------------
---- --------------------------
------
------
------选项
bootstrap-layout-scrollable 提供了一些选项来进行个性化配置。
滚动条颜色
<div class="scrollable" data-scrollbar-color="rgb(255, 255, 255)">
滚动条尺寸
<div class="scrollable" data-scrollbar-size="10px">
滚动条位置
<div class="scrollable" data-scrollbar-position="inside">
代码示例
HTML：
-- -------------------- ---- -------
---- ------------------
---- ------------------ ------------------------------ --------------------------
---- ------------
---- -----------------------------
---- -----------------------------
------
---- ------------
---- -----------------------------
---- -----------------------------
------
---- ------------
---- -----------------------------
---- -----------------------------
------
---- --- ---
------
------JavaScript：
$(document).ready(function () {
$('.scrollable').scrollable({
stopScrollPropagation: true
});
});总结
bootstrap-layout-scrollable 是一个简单易用的滚动布局插件，提供了多个选项来个性化配置。希望本文对你有所帮助，能够让你更好地使用 bootstrap-layout-scrollable 完成你的工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c81ccdc64669dde4cee