https://github.com/pengjiyuan/pretty-scrollbar

Pretty your scrollbar
https://github.com/pengjiyuan/pretty-scrollbar

Last synced: 3 months ago
JSON representation

Pretty your scrollbar

• Host: GitHub
• URL: https://github.com/pengjiyuan/pretty-scrollbar
• Owner: PengJiyuan
• License: mit
• Created: 2016-11-18T12:03:08.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-11-24T12:43:48.000Z (over 8 years ago)
• Last Synced: 2025-01-08T17:09:33.432Z (5 months ago)
• Language: JavaScript
• Homepage: https://pengjiyuan.github.io/pretty-scrollbar/
• Size: 12.7 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# pretty-scrollbar

隐藏传统滚动条，生成自定义滚动条。·[Demo](http://pengjiyuan.github.io/pretty-scrollbar)

## Usage

```bash

$ npm install pretty-scrollbar --save

```

```javascript

var prettyScroll = require('pretty-scrollbar');

prettyScroll(element, options);

```

或者

```html

PrettyScroll(element, options);

```

即可给element添加自定义滚动条

## Options

* **defaultWrapperWidth**    

  默认滚动条背景的宽度， 用于遮盖默认滚动条。默认为`20`。    

  

* **barWidth**    

  自定义滚动条的宽度。默认为`7`。    

  

* **wrappColor**    

  默认滚动条背景的颜色。默认为`null`。会自动识别element的背景颜色，如果没有则设置为`#fff`。    

  

* **barColor**    

  自定义滚动条的颜色。默认为`rgba(0, 0, 0, 0.4)`。    

  

* **right**    

  自定义滚动条距离所选element右边界的距离。默认为`2`。    

  

* **autoHide**    

  是否自动隐藏滚动条。默认为`true`。

## Demo

> **Note**: 所选element需设置`overflow-y: scroll`;

```html



PrettyScroll('.test', {

    barWidth: 8,

    autoHide: false

});

```