cartodb4/perfect-scrollbar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dom changed event.

Browse Source 
Updated docs.
This commit is contained in:
nobuti
2017-01-18 20:14:23 +01:00
parent 5f0a423128
commit 4707acc287
2 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
README.md
View File

@@ -121,7 +121,7 @@ keep in mind when you'd like to change the CSS files.
* the scrollbar's position must be 'absolute'. * the scrollbar's position must be 'absolute'.
* the scrollbar-x must have a 'bottom' css style, and the scrollbar-y * the scrollbar-x must have a 'bottom' css style, and the scrollbar-y
must have a 'right' css style. must have a 'right' css style.
Please keep in mind that perfect-scrollbar won't completely emulate native Please keep in mind that perfect-scrollbar won't completely emulate native
scrolls. Scroll hooking is generally considered as bad practice, and scrolls. Scroll hooking is generally considered as bad practice, and
perfect-scrollbar should be used with care. Unless custom scroll is really needed, perfect-scrollbar should be used with care. Unless custom scroll is really needed,
@@ -288,52 +288,56 @@ imgLoader.perfectScrollbar();
perfect-scrollbar supports optional parameters. perfect-scrollbar supports optional parameters.
### handlers ### handlers
It is a list of handlers to use to scroll the element. It is a list of handlers to use to scroll the element.
**Default**: `['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch']` **Default**: `['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch']`
**Disabled by default**: `'selection'` **Disabled by default**: `'selection'`
### wheelSpeed ### wheelSpeed
The scroll speed applied to mousewheel event. The scroll speed applied to mousewheel event.
**Default**: `1` **Default**: `1`
### wheelPropagation ### wheelPropagation
If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element. If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element.
**Default**: `false` **Default**: `false`
### swipePropagation ### swipePropagation
If this option is true, when the scroll reaches the end of the side, touch scrolling will be propagated to parent element. If this option is true, when the scroll reaches the end of the side, touch scrolling will be propagated to parent element.
**Default**: `true` **Default**: `true`
### minScrollbarLength ### minScrollbarLength
When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels. When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels.
**Default**: `null` **Default**: `null`
### maxScrollbarLength ### maxScrollbarLength
When set to an integer value, the thumb part of the scrollbar will not expand over that number of pixels. When set to an integer value, the thumb part of the scrollbar will not expand over that number of pixels.
**Default**: `null` **Default**: `null`
### useBothWheelAxes ### useBothWheelAxes
When set to true, and only one (vertical or horizontal) scrollbar is visible then both vertical and horizontal scrolling will affect the scrollbar. When set to true, and only one (vertical or horizontal) scrollbar is visible then both vertical and horizontal scrolling will affect the scrollbar.
**Default**: `false` **Default**: `false`
### suppressScrollX ### suppressScrollX
When set to true, the scroll bar in X axis will not be available, regardless of the content width. When set to true, the scroll bar in X axis will not be available, regardless of the content width.
**Default**: `false` **Default**: `false`
### suppressScrollY ### suppressScrollY
When set to true, the scroll bar in Y axis will not be available, regardless of the content height. When set to true, the scroll bar in Y axis will not be available, regardless of the content height.
**Default**: `false` **Default**: `false`
### scrollXMarginOffset ### scrollXMarginOffset
The number of pixels the content width can surpass the container width without enabling the X axis scroll bar. Allows some "wiggle room" or "offset break", so that X axis scroll bar is not enabled just because of a few pixels. The number of pixels the content width can surpass the container width without enabling the X axis scroll bar. Allows some "wiggle room" or "offset break", so that X axis scroll bar is not enabled just because of a few pixels.
**Default**: `0` **Default**: `0`
### scrollYMarginOffset ### scrollYMarginOffset
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. 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.
**Default**: `0` **Default**: `0`
### autoupdate
When set to true, the scroll will be updated when an element is added or removed from the content.
**Default**: `true`
### theme ### theme
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-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map. 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-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map.
**Default**: `'default'` **Default**: `'default'`
**Example 1:** **Example 1:**
@@ -396,6 +400,9 @@ This event fires when scrolling reaches the start of the x-axis.
### ps-x-reach-end ### ps-x-reach-end
This event fires when scrolling reaches the end of the x-axis. This event fires when scrolling reaches the end of the x-axis.
### ps-dom-change
This event fires when dom elements have been added to or removed from the content.
You can listen to these events either with vanilla JavaScript You can listen to these events either with vanilla JavaScript
```javascript ```javascript
document.addEventListener('ps-scroll-x', function () { document.addEventListener('ps-scroll-x', function () {
@@ -413,7 +420,7 @@ $(document).on('ps-scroll-x', function () {
### Scrolling children inside perfect-scrollbar ### Scrolling children inside perfect-scrollbar
You can natively scroll children inside `perfect-scrollbar` with the mouse-wheel. Scrolling automatically works if You can natively scroll children inside `perfect-scrollbar` with the mouse-wheel. Scrolling automatically works if
the child is a `textarea`. All other elements need to have the `ps-child` class. This is demonstrated in [`/examples/children-native-scroll.html`](examples/children-native-scroll.html) the child is a `textarea`. All other elements need to have the `ps-child` class. This is demonstrated in [`/examples/children-native-scroll.html`](examples/children-native-scroll.html)
## IE Support ## IE Support

7
src/js/plugin/autoupdate.js
View File

@@ -4,6 +4,12 @@ var update = require('./update');
var MutationObserver = window.MutationObserver; var MutationObserver = window.MutationObserver;
var instances = require('./instances'); var instances = require('./instances');
var createDOMEvent = function (name) {
var event = document.createEvent('Event');
event.initEvent(name, true, true);
return event;
};
module.exports = function (element) { module.exports = function (element) {
if (MutationObserver === null || MutationObserver === undefined) { if (MutationObserver === null || MutationObserver === undefined) {
// MutationObserver is not supported // MutationObserver is not supported
@@ -13,6 +19,7 @@ module.exports = function (element) {
var i = instances.get(element); var i = instances.get(element);
var onMutationObserver = function () { var onMutationObserver = function () {
update(element); update(element);
element.dispatchEvent(createDOMEvent('ps-dom-change'));
}; };
i.observer = new MutationObserver(onMutationObserver); i.observer = new MutationObserver(onMutationObserver);