Dom changed event.
Updated docs.
This commit is contained in:
parent
5f0a423128
commit
4707acc287
37
README.md
37
README.md
@ -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-x must have a 'bottom' css style, and the scrollbar-y
|
||||
must have a 'right' css style.
|
||||
|
||||
|
||||
Please keep in mind that perfect-scrollbar won't completely emulate native
|
||||
scrolls. Scroll hooking is generally considered as bad practice, and
|
||||
perfect-scrollbar should be used with care. Unless custom scroll is really needed,
|
||||
@ -288,52 +288,56 @@ imgLoader.perfectScrollbar();
|
||||
perfect-scrollbar supports optional parameters.
|
||||
|
||||
### handlers
|
||||
It is a list of handlers to use to scroll the element.
|
||||
**Default**: `['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch']`
|
||||
It is a list of handlers to use to scroll the element.
|
||||
**Default**: `['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch']`
|
||||
**Disabled by default**: `'selection'`
|
||||
|
||||
### wheelSpeed
|
||||
The scroll speed applied to mousewheel event.
|
||||
The scroll speed applied to mousewheel event.
|
||||
**Default**: `1`
|
||||
|
||||
### 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`
|
||||
|
||||
### 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`
|
||||
|
||||
### 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`
|
||||
|
||||
### 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`
|
||||
|
||||
### 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`
|
||||
|
||||
### 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`
|
||||
|
||||
### 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`
|
||||
|
||||
### 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`
|
||||
|
||||
### 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`
|
||||
|
||||
### autoupdate
|
||||
When set to true, the scroll will be updated when an element is added or removed from the content.
|
||||
**Default**: `true`
|
||||
|
||||
### 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'`
|
||||
|
||||
**Example 1:**
|
||||
@ -396,6 +400,9 @@ This event fires when scrolling reaches the start of the x-axis.
|
||||
### ps-x-reach-end
|
||||
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
|
||||
```javascript
|
||||
document.addEventListener('ps-scroll-x', function () {
|
||||
@ -413,7 +420,7 @@ $(document).on('ps-scroll-x', function () {
|
||||
|
||||
### 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)
|
||||
|
||||
## IE Support
|
||||
|
@ -4,6 +4,12 @@ var update = require('./update');
|
||||
var MutationObserver = window.MutationObserver;
|
||||
var instances = require('./instances');
|
||||
|
||||
var createDOMEvent = function (name) {
|
||||
var event = document.createEvent('Event');
|
||||
event.initEvent(name, true, true);
|
||||
return event;
|
||||
};
|
||||
|
||||
module.exports = function (element) {
|
||||
if (MutationObserver === null || MutationObserver === undefined) {
|
||||
// MutationObserver is not supported
|
||||
@ -13,6 +19,7 @@ module.exports = function (element) {
|
||||
var i = instances.get(element);
|
||||
var onMutationObserver = function () {
|
||||
update(element);
|
||||
element.dispatchEvent(createDOMEvent('ps-dom-change'));
|
||||
};
|
||||
|
||||
i.observer = new MutationObserver(onMutationObserver);
|
||||
|
Loading…
Reference in New Issue
Block a user