# @moncareyws/foundation-perfect-scrollbar
> Perfect Scrollbar as a Foundation plugin
Latest version **1.0.4** (published 2019-02-13) · MIT license · 0 weekly downloads
## Install
```sh
npm install @moncareyws/foundation-perfect-scrollbar
pnpm add @moncareyws/foundation-perfect-scrollbar
yarn add @moncareyws/foundation-perfect-scrollbar
bun add @moncareyws/foundation-perfect-scrollbar
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-02-13 |
| First published | 2019-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 33.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Samuel Moncarey |
| Maintainers | moncareyws |
| Keywords | foundation, scrollbar, scroll |
## Links
- npm: https://www.npmjs.com/package/@moncareyws/foundation-perfect-scrollbar
- Repository: https://github.com/moncareyws/foundation-perfect-scrollbar
- Homepage: https://github.com/moncareyws/foundation-perfect-scrollbar#readme
- Issues: https://github.com/moncareyws/foundation-perfect-scrollbar/issues
- npm.io page: https://npm.io/package/@moncareyws/foundation-perfect-scrollbar
## Dependencies (4)
- [jquery](https://npm.io/package/jquery.md) ^3.3.1
- [what-input](https://npm.io/package/what-input.md) ^5.1.3
- [foundation-sites](https://npm.io/package/foundation-sites.md) ^6.5.3
- [perfect-scrollbar](https://npm.io/package/perfect-scrollbar.md) 0.8.1
## Recent versions
- 1.0.4 (latest) — 2019-02-13
- 1.0.3 — 2019-02-13
- 1.0.2 — 2019-02-13
- 1.0.1 — 2019-02-13
- 1.0.0 — 2019-02-13
## README
# foundation-perfect-scrollbar
**[Perfect Scrollbar](https://github.com/noraesae/perfect-scrollbar) plugin for Foundation 6**
## Installation
```shell
npm install --save @moncareyws/foundation-perfect-scrollbar
```
Add all nessesary files to your html. This plugin only works with foundation and requires perfect-scrollbar.
```html
...
```
If you are using foundation's scss with gulp, the best way add the styles is by adding it to the sass paths in your gulpfile.
```js
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'node_modules/foundation-sites/scss',
'node_modules/@moncareyws/foundation-perfect-scrollbar/src/scss/plugin',
'node_modules/motion-ui/src'
];
gulp.task('sass', function() {
...
```
Include the foundation-perfect-scrollbar.scss file
```scss
@import "foundation-perfect-scrollbar";
```
Then add these settings to your _settings.scss file for customization
```scss
// Colors
$ps-border-radius: 6px;
$ps-rail-default-opacity: 0;
$ps-rail-container-hover-opacity: 0.6;
$ps-rail-hover-opacity: 0.9;
$ps-bar-bg: transparent;
$ps-bar-container-hover-bg: #aaa;
$ps-bar-hover-bg: #999;
$ps-rail-hover-bg: #eee;
// Sizes
$ps-scrollbar-x-rail-bottom: 0px;
$ps-scrollbar-x-rail-height: 15px;
$ps-scrollbar-x-bottom: 2px;
$ps-scrollbar-x-height: 6px;
$ps-scrollbar-x-hover-height: 11px;
$ps-scrollbar-y-rail-right: 0;
$ps-scrollbar-y-rail-width: 15px;
$ps-scrollbar-y-right: 2px;
$ps-scrollbar-y-width: 6px;
$ps-scrollbar-y-hover-width: 11px;
```
## Usage
**Basic html**
```html
```
Run foundation and it will automaticaly initialize all the scroll containers
```js
$(document).foundation();
```
**Plugin options**
|Name |Default |Descrition|
|---------|---------|----------|
|handlers|`['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch']`|It is a list of handlers to use to scroll the element.|
|wheelSpeed|`1`|The scroll speed applied to mousewheel event.|
|wheelPropagation|`false`|If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element.|
|swipePropagation|`true`|If this option is true, when the scroll reaches the end of the side, touch scrolling will be propagated to parent element.|
|minScrollbarLength|`null`|When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels.|
|maxScrollbarLength|`null`|When set to an integer value, the thumb part of the scrollbar will not expand over that number of pixels.|
|useBothWheelAxes|`false`|When set to true, and only one (vertical or horizontal) scrollbar is visible then both vertical and horizontal scrolling will affect the scrollbar.|
|suppressScrollX|`false`|When set to true, the scroll bar in X axis will not be available, regardless of the content width.|
|suppressScrollY|`false`|When set to true, the scroll bar in Y axis will not be available, regardless of the content height.|
|scrollXMarginOffset|`0`|The number of pixels the content height can surpass the container height without enabling the Y axis scroll bar. Allows some "wiggle room" or "offset break", so that Y axis scroll bar is not enabled just because of a few pixels.|
|initialXPosition|`'left'`|Automaticaly scroll the content to an initial position, this can the number of px to scroll to or the strings `'left'` or `'right'`.|
|initialYPosition|`'top'`|Automaticaly scroll the content to an initial position, this can the number of px to scroll to or the strings `'top'` or `'bottom'`.|
|stopPropagationOnClick|`true`|When set to false, when clicking on a rail, the click event will be allowed to propagate.|
|theme|`'foundation'`|A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-foundation`. In order to create custom themes with scss use the `ps-container($theme)` mixin, where `$theme` is an scss map.
## Licence
[](https://opensource.org/licenses/mit-license.php)
---
_Source: https://npm.io/package/@moncareyws/foundation-perfect-scrollbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._