nanoScrollerJS

> 编程语言

开源

一个jQuery插件，提供了一种简单的方式来实现Lion OS滚动条。

2.7K stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

一个jQuery插件，提供了一种简单的方式来实现Lion OS滚动条。

此项目不再维护

此项目目前不再积极维护。如果你需要一个最新的滚动条插件，请尝试使用 OverlayScrollbars： https://github.com/KingSora/OverlayScrollbars

nanoScroller.js [![NPM 版本][npm-image]][npm-url]

nanoScroller.js 是一个 jQuery 插件，为你的网站提供了一种简单的方式来实现 Mac OS X Lion 风格的滚动条。它使用最少的 HTML 标记，即 .nano > .nano-content。其他滚动条 div 元素 .pane > .nano-slider 会在运行时添加，以避免模板中的杂乱。最新版本利用原生滚动，并适用于 iPad、iPhone 以及部分 Android 平板电脑。

下载

生产版本
开发版本
默认样式表要开始使用，你需要三样基本的东西：

1. 标记

需要以下类型的标记结构才能使插件正常工作：

xml


</div>

复制 HTML 标记。将 .nano 改为与你的内容相关的内容。不过，只要你有带 ID 引用的父级 div，也可以移除该属性。例如 #parent > .nano。nano 和 nano-content 类名可以通过插件选项自定义（在这种情况下，你也必须在插件的 CSS 文件中重命名它们）。

2. CSS

在你的页面 <head> 部分链接 nanoscroller.css 文件（...或者将其内容复制到你页面的主样式表文件中）。

xml

<link rel="stylesheet" href="nanoscroller.css">

你应该为容器指定宽度和高度，并为滚动条应用一些自定义样式。以下是一个示例：

css

.nano { background: #bba; width: 500px; height: 500px; }
.nano > .nano-content { padding: 10px; }
.nano > .nano-pane   { background: #888; }
.nano > .nano-pane > .nano-slider { background: #111; }