cartodb/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.
### 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
The scroll speed applied to mousewheel event.
**Default: 1**
**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.
**Default: false**
**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.
**Default: true**
**Default**: `true`
### minScrollbarLength
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
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
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**
### 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**
**Default**: `false`
### suppressScrollX
When set to true, the scroll bar in X axis will not be available, regardless of the content width.
**Default: false**
**Default**: `false`
### suppressScrollY
When set to true, the scroll bar in Y axis will not be available, regardless of the content height.
**Default: false**
**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.
**Default: 0**
**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.
**Default: 0**
**Default**: `0`
### stopPropagationOnClick
When set to false, when clicking on a rail, the click event will be allowed to propagate.
**Default: true**
### useSelectionScroll
When set to true, you can scroll the container by selecting text and move the cursor.
**Default: false**
**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.
**Default: 'default'**
**Default**: `'default'`
**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';
module.exports = {
handlers: ['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch'],
maxScrollbarLength: null,
minScrollbarLength: null,
scrollXMarginOffset: 0,
@ -10,8 +11,6 @@ module.exports = {
suppressScrollY: false,
swipePropagation: true,
useBothWheelAxes: false,
useKeyboard: true,
useSelectionScroll: false,
wheelPropagation: false,
wheelSpeed: 1,
theme: 'default'

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

@ -1,6 +1,7 @@
'use strict';
var instances = require('../instances')
, h = require('../../lib/helper')
, updateGeometry = require('../update-geometry')
, 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);
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');
// Handlers
var clickRailHandler = require('./handler/click-rail')
, dragScrollbarHandler = require('./handler/drag-scrollbar')
, keyboardHandler = require('./handler/keyboard')
, mouseWheelHandler = require('./handler/mouse-wheel')
, nativeScrollHandler = require('./handler/native-scroll')
, selectionHandler = require('./handler/selection')
, touchHandler = require('./handler/touch');
var handlers = {
'click-rail': require('./handler/click-rail'),
'drag-scrollbar': require('./handler/drag-scrollbar'),
'keyboard': require('./handler/keyboard'),
'wheel': require('./handler/mouse-wheel'),
'touch': require('./handler/touch'),
'selection': require('./handler/selection')
};
var nativeScrollHandler = require('./handler/native-scroll');
module.exports = function (element, userSettings) {
userSettings = typeof userSettings === 'object' ? userSettings : {};
@ -25,21 +27,11 @@ module.exports = function (element, userSettings) {
i.settings = h.extend(i.settings, userSettings);
cls.add(element, 'ps-theme-' + i.settings.theme);
clickRailHandler(element);
dragScrollbarHandler(element);
mouseWheelHandler(element);
i.settings.handlers.forEach(function (handlerName) {
handlers[handlerName](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);
};