SimpleBar 安装和配置指南

2026-01-20 01:37:15作者：殷蕙予

1. 项目基础介绍和主要编程语言

项目基础介绍

SimpleBar 是一个用于替换浏览器默认滚动条的纯 JavaScript 库。它通过自定义 CSS 样式来美化滚动条，同时保持了原生滚动条的性能和行为。SimpleBar 的设计目标是简单、轻量且易于使用，适用于各种现代浏览器。

主要编程语言

SimpleBar 主要使用以下编程语言：

JavaScript
TypeScript
CSS
HTML

2. 项目使用的关键技术和框架

关键技术和框架

JavaScript: 用于实现滚动条的自定义功能。
CSS: 用于样式化自定义滚动条。
TypeScript: 用于增强代码的类型安全性和可维护性。
Rollup: 用于打包和构建项目。
Jest: 用于单元测试。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装 SimpleBar 之前，请确保您的开发环境中已经安装了以下工具：

Node.js: 用于运行 JavaScript 环境。
npm 或 yarn: 用于安装和管理依赖包。

详细安装步骤

步骤 1: 安装 Node.js 和 npm/yarn

如果您还没有安装 Node.js 和 npm/yarn，请访问 Node.js 官方网站下载并安装最新版本的 Node.js。npm 会随 Node.js 一起安装。如果您更喜欢使用 yarn，可以通过以下命令安装：

npm install -g yarn

步骤 2: 创建项目目录

创建一个新的项目目录，并在该目录下初始化一个新的 npm 项目：

mkdir my-simplebar-project
cd my-simplebar-project
npm init -y

步骤 3: 安装 SimpleBar

使用 npm 或 yarn 安装 SimpleBar：

npm install simplebar

或者使用 yarn：

yarn add simplebar

步骤 4: 在项目中引入 SimpleBar

在您的 HTML 文件中引入 SimpleBar 的 CSS 和 JavaScript 文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SimpleBar 示例</title>
    <link rel="stylesheet" href="node_modules/simplebar/dist/simplebar.min.css">
</head>
<body>
    <div data-simplebar style="height: 200px; width: 300px; overflow: auto;">
        <p>这是一些内容...</p>
        <p>这是一些内容...</p>
        <p>这是一些内容...</p>
    </div>

    <script src="node_modules/simplebar/dist/simplebar.min.js"></script>
</body>
</html>

步骤 5: 初始化 SimpleBar

在 JavaScript 中初始化 SimpleBar：

document.addEventListener('DOMContentLoaded', function() {
    new SimpleBar(document.querySelector('[data-simplebar]'));
});

步骤 6: 运行项目

在浏览器中打开您的 HTML 文件，您将看到自定义样式的滚动条已经生效。

总结

通过以上步骤，您已经成功安装并配置了 SimpleBar。SimpleBar 是一个简单且强大的工具，可以帮助您轻松地自定义网页的滚动条样式，同时保持原生滚动条的性能和行为。

simplebar

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

项目地址：https://gitcode.com/gh_mirrors/si/simplebar

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

336

178

ops-math

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

Ascend Extension for PyTorch

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

agent-studio

openJiuwen agent-studio提供零码、低码可视化开发和工作流编排，模型、知识库、插件等各资源管理能力

本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。