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

Add 'handlers' option to configure scrolling methods

Browse Source 
Please refer to README.md and examples/options-handlers.html for the
usage.
This commit is contained in:
Hyunje Alex Jun 2016-02-22 20:53:19 +09:00
parent 6f63623b93
commit bd7134f33d
5 changed files with 87 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
README.md
View File

@ -283,61 +283,58 @@ imgLoader.perfectScrollbar();
perfect-scrollbar supports optional parameters. 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']`
**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`
### useKeyboard
When set to true, the scroll works with arrow keys on the keyboard. The element is scrolled only when the mouse cursor hovers the element.
**Default: true**
### 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`
### stopPropagationOnClick ### stopPropagationOnClick
When set to false, when clicking on a rail, the click event will be allowed to propagate. When set to false, when clicking on a rail, the click event will be allowed to propagate.
**Default: true** **Default**: `true`
### useSelectionScroll
When set to true, you can scroll the container by selecting text and move the cursor.
**Default: false**
### 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:**

49
examples/options-handlers.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; padding:0px; width: 600px; height: 400px; overflow: auto; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
</style>
</head>
<body>
<h1>Default</h1>
<pre><code>handlers: ['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch']</code></pre>
<div id="default" class="contentHolder">
<div class="content">
</div>
</div>
<h1>No keyboard</h1>
<pre><code>handlers: ['click-rail', 'drag-scrollbar', 'wheel', 'touch']</code></pre>
<div id="no-keyboard" class="contentHolder">
<div class="content">
</div>
</div>
<h1>Click and Drag</h1>
<pre><code>handlers: ['click-rail', 'drag-scrollbar']</code></pre>
<div id="click-and-drag" class="contentHolder">
<div class="content">
</div>
</div>
<script>
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#default'));
Ps.initialize($('#no-keyboard'), {
handlers: ['click-rail', 'drag-scrollbar', 'wheel', 'touch']
});
Ps.initialize($('#click-and-drag'), {
handlers: ['click-rail', 'drag-scrollbar']
});
};
</script>
</body>
</html>

3
src/js/plugin/default-setting.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
module.exports = { module.exports = {
handlers: ['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch'],
maxScrollbarLength: null, maxScrollbarLength: null,
minScrollbarLength: null, minScrollbarLength: null,
scrollXMarginOffset: 0, scrollXMarginOffset: 0,
@ -10,8 +11,6 @@ module.exports = {
suppressScrollY: false, suppressScrollY: false,
swipePropagation: true, swipePropagation: true,
useBothWheelAxes: false, useBothWheelAxes: false,
useKeyboard: true,
useSelectionScroll: false,
wheelPropagation: false, wheelPropagation: false,
wheelSpeed: 1, wheelSpeed: 1,
theme: 'default' theme: 'default'

9
src/js/plugin/handler/touch.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
var instances = require('../instances') var instances = require('../instances')
, h = require('../../lib/helper')
, updateGeometry = require('../update-geometry') , updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll'); , updateScroll = require('../update-scroll');
@ -165,7 +166,11 @@ function bindTouchHandler(element, i, supportsTouch, supportsIePointer) {
} }
} }
module.exports = function (element, supportsTouch, supportsIePointer) { module.exports = function (element) {
if (!h.env.supportsTouch && !h.env.supportsIePointer) {
return;
}
var i = instances.get(element); var i = instances.get(element);
bindTouchHandler(element, i, supportsTouch, supportsIePointer); bindTouchHandler(element, i, h.env.supportsTouch, h.env.supportsIePointer);
}; };

34
src/js/plugin/initialize.js
View File

@ -6,13 +6,15 @@ var cls = require('../lib/class')
, updateGeometry = require('./update-geometry'); , updateGeometry = require('./update-geometry');
// Handlers // Handlers
var clickRailHandler = require('./handler/click-rail') var handlers = {
, dragScrollbarHandler = require('./handler/drag-scrollbar') 'click-rail': require('./handler/click-rail'),
, keyboardHandler = require('./handler/keyboard') 'drag-scrollbar': require('./handler/drag-scrollbar'),
, mouseWheelHandler = require('./handler/mouse-wheel') 'keyboard': require('./handler/keyboard'),
, nativeScrollHandler = require('./handler/native-scroll') 'wheel': require('./handler/mouse-wheel'),
, selectionHandler = require('./handler/selection') 'touch': require('./handler/touch'),
, touchHandler = require('./handler/touch'); 'selection': require('./handler/selection')
};
var nativeScrollHandler = require('./handler/native-scroll');
module.exports = function (element, userSettings) { module.exports = function (element, userSettings) {
userSettings = typeof userSettings === 'object' ? userSettings : {}; userSettings = typeof userSettings === 'object' ? userSettings : {};
@ -25,21 +27,11 @@ module.exports = function (element, userSettings) {
i.settings = h.extend(i.settings, userSettings); i.settings = h.extend(i.settings, userSettings);
cls.add(element, 'ps-theme-' + i.settings.theme); cls.add(element, 'ps-theme-' + i.settings.theme);
clickRailHandler(element); i.settings.handlers.forEach(function (handlerName) {
dragScrollbarHandler(element); handlers[handlerName](element);
mouseWheelHandler(element); });
nativeScrollHandler(element); nativeScrollHandler(element);
if (i.settings.useSelectionScroll) {
selectionHandler(element);
}
if (h.env.supportsTouch || h.env.supportsIePointer) {
touchHandler(element, h.env.supportsTouch, h.env.supportsIePointer);
}
if (i.settings.useKeyboard) {
keyboardHandler(element);
}
updateGeometry(element); updateGeometry(element);
}; };