From 4707acc2875660994daa78cb87741592414207d3 Mon Sep 17 00:00:00 2001 From: nobuti Date: Wed, 18 Jan 2017 20:14:23 +0100 Subject: [PATCH] Dom changed event. Updated docs. --- README.md | 37 ++++++++++++++++++++++--------------- src/js/plugin/autoupdate.js | 7 +++++++ 2 files changed, 29 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index b05f5c2..eca0d3a 100644 --- a/README.md +++ b/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 diff --git a/src/js/plugin/autoupdate.js b/src/js/plugin/autoupdate.js index d78dc35..7654650 100644 --- a/src/js/plugin/autoupdate.js +++ b/src/js/plugin/autoupdate.js @@ -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);