1.0.4 • Published 5 years ago
@moncareyws/foundation-perfect-scrollbar v1.0.4
foundation-perfect-scrollbar
Perfect Scrollbar plugin for Foundation 6
Installation
npm install --save @moncareyws/foundation-perfect-scrollbarAdd all nessesary files to your html. This plugin only works with foundation and requires perfect-scrollbar.
<link rel="stylesheet" type="text/css" href="node_modules/foundation-sites/dist/css/foundation.css">
<link rel="stylesheet" type="text/css" href="node_modules/foundation-perfect-scrollbar/dist/css/foundation-perfect-scrollbar.css">
...
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/what-input/dist/what-input.js"></script>
<script src="node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.js"></script>
<script src="node_modules/foundation-sites/dist/js/foundation.min.js"></script>
<script src="node_modules/foundation-perfect-scrollbar/dist/js/foundation.perfectScrollbar.min.js"></script>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.
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
@import "foundation-perfect-scrollbar";Then add these settings to your _settings.scss file for customization
// 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
<div data-perfect-scrollbar>
<!-- Scrollable content -->
</div>Run foundation and it will automaticaly initialize all the scroll containers
$(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
