Release 0.6.8

1. Fix broken drag scrolling out of viewport 2. Fix untriggered scroll events 3. Remove select element hack for Firefox 4. Set scrollbar size to 0 when inactive 5. Add tabindex properties to scrollbars
Add tabindex properties to scrollbars
2015-12-10 13:46:20 +09:00 · 2015-12-10 13:36:19 +09:00 · 2015-12-10 13:17:59 +09:00 · 2015-12-10 12:59:23 +09:00 · 2015-11-19 23:46:44 +00:00 · 2015-11-19 11:50:31 +11:00
22 changed files with 455 additions and 206 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "env" : {
+  "env": {
    "node": true,
    "browser": true
  },
@@ -7,14 +7,34 @@
    "$": true,
    "define": true
  },
-  "rules" : {
-    "quotes": false,
-    "space-after-keywords": [2, "always", {"checkFunctionKeyword": true}],
+  "extends": "eslint:recommended",
+  "rules": {
+    "eqeqeq": 2,
+    "no-multi-spaces": 2,
+    "curly": 2,
+    "semi": 2,
+    "no-with": 2,
+    "strict": [2, "global"],
+    "radix": 2,
+    "no-use-before-define": 2,
+    "block-spacing": 2,
+    "brace-style": [2, "1tbs", {"allowSingleLine": true}],
+    "camelcase": 2,
+    "comma-spacing": [2, {"before": false, "after": true}],
+    "eol-last": 2,
+    "no-multiple-empty-lines": 2,
+    "indent": [2, 2],
+    "key-spacing": [2, {"beforeColon": false, "afterColon": true}],
+    "linebreak-style": [2, "unix"],
+    "new-parens": 2,
+    "no-trailing-spaces": 2,
+    "semi-spacing": 2,
    "space-before-blocks": [2, "always"],
-    "brace-style": [2, "1tbs", { "allowSingleLine": false}],
-    "spaced-line-comment": [2, "always"],
-    "radix": [2, "always"],
-    "key-spacing": [2, "always", {"beforeColon": false, "afterColon": true}],
-    "no-multiple-empty-lines": [2, {max: 1}],
+    "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
+    "space-in-parens": 2,
+    "space-infix-ops": 2,
+    "space-return-throw-case": 2,
+    "space-unary-ops": 2,
+    "spaced-comment": 2
  }
 }
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,8 +1,7 @@
 language: node_js
 node_js:
- '0.10'
-before_script:
- npm install -g gulp
+- 0.12
+- 4
 deploy:
  provider: releases
  api_key:
@@ -13,5 +12,4 @@ deploy:
    branch: master
    tags: true
 before_deploy:
- gulp
- gulp compress
+- npm run before-deploy
--- a/README.md
+++ b/README.md
@@ -312,6 +312,57 @@ The number of pixels the content height can surpass the container height without
 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**
+
+## Events
+
+perfect-scrollbar dispatches custom events.
+
+### ps-scroll-y
+This event fires when the y-axis is scrolled in either direction.
+
+### ps-scroll-x
+This event fires when the x-axis is scrolled in either direction.
+
+### ps-scroll-up
+This event fires when scrolling upwards.
+
+### ps-scroll-down
+This event fires when scrolling downwards.
+
+### ps-scroll-left
+This event fires when scrolling to the left.
+
+### ps-scroll-right
+This event fires when scrolling to the right.
+
+### ps-y-reach-start
+This event fires when scrolling reaches the start of the y-axis.
+
+### ps-y-reach-end
+This event fires when scrolling reaches the end of the y-axis (useful for infinite scroll).
+
+### ps-x-reach-start
+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.
+
+You can listen to these events either with vanilla JavaScript
+```javascript
+document.addEventListener('ps-scroll-x', function () {
+  // ...
+})
+```
+or with jQuery
+```javascript
+$(document).on('ps-scroll-x', function () {
+  // ...
+})
+```
+
 ## Contribution

 #### Please read [Contributing](https://github.com/noraesae/perfect-scrollbar/wiki/Contributing) in the wiki before making any contribution.
--- a/examples/events.html
+++ b/examples/events.html
@@ -0,0 +1,89 @@
+<!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>
+        p {
+            text-align: center;
+        }
+
+        .container {
+            position: relative;
+            margin: 0px auto;
+            padding: 0px;
+            width: 600px;
+            height: 400px;
+            overflow: auto;
+        }
+
+        .container .content {
+            background-image: url('./azusa.jpg');
+            width: 1280px;
+            height: 720px;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="content">
+    </div>
+</div>
+
+<p><strong>Axis</strong> <span id="axis">&hellip;</span></p>
+
+<p><strong>Direction</strong> <span id="direction">&hellip;</span></p>
+
+<p><strong>Start / End</strong> <span id="start-end">(scroll to the start or end of an axis)</span></p>
+<script>
+    var container = document.querySelector('.container')
+            , axis = document.getElementById('axis')
+            , direction = document.getElementById('direction')
+            , startEnd = document.getElementById('start-end');
+    Ps.initialize(container);
+
+    document.addEventListener('ps-scroll-y', function () {
+        axis.innerHTML = 'Y Axis';
+    });
+
+    document.addEventListener('ps-scroll-x', function () {
+        axis.innerHTML = 'X Axis';
+    });
+
+    document.addEventListener('ps-scroll-up', function () {
+        direction.innerHTML = 'up';
+    });
+
+    document.addEventListener('ps-scroll-down', function () {
+        direction.innerHTML = 'down';
+    });
+
+    document.addEventListener('ps-scroll-left', function () {
+        direction.innerHTML = 'left';
+    });
+
+    document.addEventListener('ps-scroll-right', function () {
+        direction.innerHTML = 'right';
+    });
+
+    document.addEventListener('ps-y-reach-start', function () {
+        startEnd.innerHTML = 'Reached start of <em>Y-Axis</em>';
+    });
+
+    document.addEventListener('ps-y-reach-end', function () {
+        startEnd.innerHTML = 'Reached end of <em>Y-Axis</em>';
+    });
+
+    document.addEventListener('ps-x-reach-start', function () {
+        startEnd.innerHTML = 'Reached start of <em>X-Axis</em>';
+    });
+
+    document.addEventListener('ps-x-reach-end', function () {
+        startEnd.innerHTML = 'Reached end of <em>X-Axis</em>'
+    });
+
+</script>
+</body>
+</html>
--- a/examples/reach-the-end-callback.html
+++ b/examples/reach-the-end-callback.html
@@ -1,53 +0,0 @@
-<!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>
-      #description {
-        border: 1px solid gray;
-        height:150px;
-        width: 400px;
-        overflow: auto;
-        position: relative;
-      }
-      #status { color: red; }
-    </style>
-  </head>
-  <body>
-    <div id="description" class="wrapper">
-      <p>Hello, world! 0</p>
-      <p>Hello, world! 1</p>
-      <p>Hello, world! 2</p>
-      <p>Hello, world! 3</p>
-      <p>Hello, world! 4</p>
-      <p>Hello, world! 5</p>
-      <p>Hello, world! 6</p>
-      <p>Hello, world! 7</p>
-      <p>Hello, world! 8</p>
-      <p>Hello, world! 9</p>
-    </div>
-    <div id="status">
-    </div>
-    <script type="text/javascript">
-      var $ = document.querySelector.bind(document);
-      window.onload = function () {
-        var container = $('#description');
-        var stat = $('#status');
-        Ps.initialize(container);
-        container.addEventListener('scroll', function (e) {
-          if(container.scrollTop === 0) {
-            stat.innerHTML = 'it reaches the top!';
-          }
-          else if (container.scrollTop === container.scrollHeight - container.clientHeight) {
-            stat.innerHTML = 'it reaches the end!';
-          } else {
-            stat.innerHTML = '';
-          }
-        });
-      };
-    </script>
-  </body>
-</html>
--- a/examples/text-content.html
+++ b/examples/text-content.html
@@ -32,7 +32,9 @@
    <script>
      var $ = document.querySelector.bind(document);
      window.onload = function () {
-        Ps.initialize($('#description'));
+        Ps.initialize($('#description'), {
+          useSelectionScroll: true
+        });
      };
      $('#redraw').addEventListener('click', function () {
        var oldHtml = $('#description').innerHTML;
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -2,14 +2,16 @@

 var gulp = require('gulp')
  , browserify = require('browserify')
-  , bump = require('gulp-bump')
+  , buffer = require('vinyl-buffer')
  , connect = require('gulp-connect')
+  , del = require('del')
  , eslint = require('gulp-eslint')
  , insert = require('gulp-insert')
+  , path = require('path')
  , rename = require('gulp-rename')
-  , rimraf = require('gulp-rimraf')
  , sass = require('gulp-sass')
-  , transform = require('vinyl-transform')
+  , source = require('vinyl-source-stream')
+  , stream = require('event-stream')
  , uglify = require('gulp-uglify')
  , zip = require('gulp-zip');

@@ -23,63 +25,66 @@ gulp.task('lint', function () {
 });

 gulp.task('clean:js', function () {
-  return gulp.src('./dist/js/*.js', {read: false})
-    .pipe(rimraf());
+  return del(['./dist/js/*.js']);
 });

 gulp.task('clean:js:min', function () {
-  return gulp.src('./dist/js/min/*.js', {read: false})
-    .pipe(rimraf());
+  return del(['./dist/js/min/*.js']);
 });

-function browserified() {
-  return transform(function (filename) {
-    var b = browserify(filename);
-    return b.bundle();
-  });
-}
+var jsEntries = [
+  './src/js/adaptor/global.js',
+  './src/js/adaptor/jquery.js'
+];

 gulp.task('js', ['clean:js'], function () {
-  return gulp.src('./src/js/adaptor/*.js')
-    .pipe(browserified())
-    .pipe(insert.prepend(version))
-    .pipe(rename(function (path) {
-      if (path.basename === 'global') {
-        path.basename = 'perfect-scrollbar';
-      } else {
-        path.basename = 'perfect-scrollbar.' + path.basename;
-      }
-    }))
-    .pipe(gulp.dest('./dist/js'))
-    .pipe(connect.reload());
+  var tasks = jsEntries.map(function (src) {
+    return browserify([src]).bundle()
+      .pipe(source(path.basename(src)))
+      .pipe(buffer())
+      .pipe(insert.prepend(version))
+      .pipe(rename(function (path) {
+        if (path.basename === 'global') {
+          path.basename = 'perfect-scrollbar';
+        } else {
+          path.basename = 'perfect-scrollbar.' + path.basename;
+        }
+      }))
+      .pipe(gulp.dest('./dist/js'))
+      .pipe(connect.reload());
+  });
+  return stream.merge.apply(null, tasks);
 });

 gulp.task('js:min', ['clean:js:min'], function () {
-  return gulp.src('./src/js/adaptor/*.js')
-    .pipe(browserified())
-    .pipe(uglify())
-    .pipe(insert.prepend(version))
-    .pipe(rename(function (path) {
-      if (path.basename === 'global') {
-        path.basename = 'perfect-scrollbar.min';
-      } else {
-        path.basename = 'perfect-scrollbar.' + path.basename + '.min';
-      }
-    }))
-    .pipe(gulp.dest('./dist/js/min'));
+  var tasks = jsEntries.map(function (src) {
+    return browserify([src]).bundle()
+      .pipe(source(path.basename(src)))
+      .pipe(buffer())
+      .pipe(uglify())
+      .pipe(insert.prepend(version))
+      .pipe(rename(function (path) {
+        if (path.basename === 'global') {
+          path.basename = 'perfect-scrollbar.min';
+        } else {
+          path.basename = 'perfect-scrollbar.' + path.basename + '.min';
+        }
+      }))
+      .pipe(gulp.dest('./dist/js/min'))
+      .pipe(connect.reload());
+  });
+  return stream.merge.apply(null, tasks);
 });

 gulp.task('clean:css', function () {
-  return gulp.src('./dist/css/perfect-scrollbar.css', {read: false})
-    .pipe(rimraf());
+  return del(['./dist/css/perfect-scrollbar.css']);
 });

 gulp.task('clean:css:min', function () {
-  return gulp.src('./dist/css/perfect-scrollbar.min.css', {read: false})
-    .pipe(rimraf());
+  return del(['./dist/css/perfect-scrollbar.min.css']);
 });

-gulp.task('sass', ['clean:css'], function () {
+gulp.task('css', ['clean:css'], function () {
  return gulp.src('./src/css/main.scss')
    .pipe(sass())
    .pipe(insert.prepend(version))
@@ -88,7 +93,7 @@ gulp.task('sass', ['clean:css'], function () {
    .pipe(connect.reload());
 });

-gulp.task('sass:min', ['clean:css:min'], function () {
+gulp.task('css:min', ['clean:css:min'], function () {
  return gulp.src('./src/css/main.scss')
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(insert.prepend(version))
@@ -96,25 +101,7 @@ gulp.task('sass:min', ['clean:css:min'], function () {
    .pipe(gulp.dest('./dist/css'));
 });

-function bumpType() {
-  if (gulp.env.major) {
-    return 'major';
-  } else if (gulp.env.minor) {
-    return 'minor';
-  } else {
-    return 'patch';
-  }
-}
-
-gulp.task('bump', function () {
-  gulp.src('./*.json')
-    .pipe(bump({type: bumpType()}))
-    .pipe(gulp.dest('./'));
-});
-
-gulp.task('release', ['bump', 'build']);
-
-gulp.task('build', ['js', 'js:min', 'sass', 'sass:min']);
+gulp.task('build', ['js', 'js:min', 'css', 'css:min']);

 gulp.task('connect', ['build'], function () {
  connect.server({
@@ -125,7 +112,7 @@ gulp.task('connect', ['build'], function () {

 gulp.task('watch', function () {
  gulp.watch(['src/js/**/*'], ['js']);
-  gulp.watch(['src/css/**/*'], ['sass']);
+  gulp.watch(['src/css/**/*'], ['css']);
 });

 gulp.task('serve', ['connect', 'watch']);
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "perfect-scrollbar",
-  "version": "0.6.4",
+  "version": "0.6.8",
  "description": "Minimalistic but perfect custom scrollbar plugin",
  "author": "Hyunje Alex Jun <me@noraesae.net>",
  "contributors": [
@@ -24,24 +24,27 @@
    "scrollbar"
  ],
  "engines": {
-    "node": ">= 0.8.0"
+    "node": ">= 0.12.0"
  },
  "devDependencies": {
-    "browserify": "^8.1.1",
-    "gulp": "^3.8.10",
-    "gulp-bump": "^0.1.11",
+    "browserify": "^11.2.0",
+    "del": "^2.0.2",
+    "event-stream": "^3.3.1",
+    "gulp": "^3.9.0",
    "gulp-connect": "^2.2.0",
-    "gulp-eslint": "^0.2.0",
-    "gulp-insert": "^0.4.0",
-    "gulp-rename": "^1.2.0",
-    "gulp-rimraf": "^0.1.1",
-    "gulp-sass": "^1.3.1",
-    "gulp-uglify": "^1.0.2",
-    "gulp-zip": "^2.0.2",
-    "vinyl-transform": "^1.0.0"
+    "gulp-eslint": "^1.0.0",
+    "gulp-insert": "^0.5.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.0.4",
+    "gulp-uglify": "^1.4.1",
+    "gulp-zip": "^3.0.2",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0"
  },
  "scripts": {
-    "test": "gulp"
+    "test": "gulp",
+    "before-deploy": "gulp && gulp compress",
+    "release": "rm -rf dist && gulp && npm publish"
  },
  "license": "MIT"
 }
--- a/src/js/lib/class.js
+++ b/src/js/lib/class.js
@@ -38,7 +38,7 @@ exports.remove = function (element, className) {

 exports.list = function (element) {
  if (element.classList) {
-    return element.classList;
+    return Array.prototype.slice.apply(element.classList);
  } else {
    return element.className.split(' ');
  }
--- a/src/js/lib/dom.js
+++ b/src/js/lib/dom.js
@@ -3,13 +3,15 @@
 */
 'use strict';

-exports.e = function (tagName, className) {
+var DOM = {};
+
+DOM.e = function (tagName, className) {
  var element = document.createElement(tagName);
  element.className = className;
  return element;
 };

-exports.appendTo = function (child, parent) {
+DOM.appendTo = function (child, parent) {
  parent.appendChild(child);
  return child;
 };
@@ -37,7 +39,7 @@ function cssMultiSet(element, obj) {
  return element;
 }

-exports.css = function (element, styleNameOrObject, styleValue) {
+DOM.css = function (element, styleNameOrObject, styleValue) {
  if (typeof styleNameOrObject === 'object') {
    // multiple set with object
    return cssMultiSet(element, styleNameOrObject);
@@ -50,7 +52,7 @@ exports.css = function (element, styleNameOrObject, styleValue) {
  }
 };

-exports.matches = function (element, query) {
+DOM.matches = function (element, query) {
  if (typeof element.matches !== 'undefined') {
    return element.matches(query);
  } else {
@@ -66,7 +68,7 @@ exports.matches = function (element, query) {
  }
 };

-exports.remove = function (element) {
+DOM.remove = function (element) {
  if (typeof element.remove !== 'undefined') {
    element.remove();
  } else {
@@ -75,3 +77,11 @@ exports.remove = function (element) {
    }
  }
 };
+
+DOM.queryChildren = function (element, selector) {
+  return Array.prototype.filter.call(element.childNodes, function (child) {
+    return DOM.matches(child, selector);
+  });
+};
+
+module.exports = DOM;
--- a/src/js/plugin/default-setting.js
+++ b/src/js/plugin/default-setting.js
@@ -4,16 +4,17 @@
 'use strict';

 module.exports = {
-  wheelSpeed: 1,
-  wheelPropagation: false,
-  swipePropagation: true,
-  minScrollbarLength: null,
  maxScrollbarLength: null,
-  useBothWheelAxes: false,
-  useKeyboard: true,
-  suppressScrollX: false,
-  suppressScrollY: false,
+  minScrollbarLength: null,
  scrollXMarginOffset: 0,
  scrollYMarginOffset: 0,
-  stopPropagationOnClick: true
+  stopPropagationOnClick: true,
+  suppressScrollX: false,
+  suppressScrollY: false,
+  swipePropagation: true,
+  useBothWheelAxes: false,
+  useKeyboard: true,
+  useSelectionScroll: false,
+  wheelPropagation: false,
+  wheelSpeed: 1
 };
--- a/src/js/plugin/handler/click-rail.js
+++ b/src/js/plugin/handler/click-rail.js
@@ -5,7 +5,8 @@

 var h = require('../../lib/helper')
  , instances = require('../instances')
-  , updateGeometry = require('../update-geometry');
+  , updateGeometry = require('../update-geometry')
+  , updateScroll = require('../update-scroll');

 function bindClickRailHandler(element, i) {
  function pageOffset(el) {
@@ -18,7 +19,7 @@ function bindClickRailHandler(element, i) {
  }
  i.event.bind(i.scrollbarYRail, 'click', function (e) {
    var halfOfScrollbarLength = h.toInt(i.scrollbarYHeight / 2);
-    var positionTop = i.railYRatio * (e.pageY - window.scrollY - pageOffset(i.scrollbarYRail).top - halfOfScrollbarLength);
+    var positionTop = i.railYRatio * (e.pageY - window.pageYOffset - pageOffset(i.scrollbarYRail).top - halfOfScrollbarLength);
    var maxPositionTop = i.railYRatio * (i.railYHeight - i.scrollbarYHeight);
    var positionRatio = positionTop / maxPositionTop;

@@ -28,7 +29,7 @@ function bindClickRailHandler(element, i) {
      positionRatio = 1;
    }

-    element.scrollTop = (i.contentHeight - i.containerHeight) * positionRatio;
+    updateScroll(element, 'top', (i.contentHeight - i.containerHeight) * positionRatio);
    updateGeometry(element);

    e.stopPropagation();
@@ -39,7 +40,7 @@ function bindClickRailHandler(element, i) {
  }
  i.event.bind(i.scrollbarXRail, 'click', function (e) {
    var halfOfScrollbarLength = h.toInt(i.scrollbarXWidth / 2);
-    var positionLeft = i.railXRatio * (e.pageX - window.scrollX - pageOffset(i.scrollbarXRail).left - halfOfScrollbarLength);
+    var positionLeft = i.railXRatio * (e.pageX - window.pageXOffset - pageOffset(i.scrollbarXRail).left - halfOfScrollbarLength);
    var maxPositionLeft = i.railXRatio * (i.railXWidth - i.scrollbarXWidth);
    var positionRatio = positionLeft / maxPositionLeft;

@@ -49,7 +50,7 @@ function bindClickRailHandler(element, i) {
      positionRatio = 1;
    }

-    element.scrollLeft = ((i.contentWidth - i.containerWidth) * positionRatio) - i.negativeScrollAdjustment;
+    updateScroll(element, 'left', ((i.contentWidth - i.containerWidth) * positionRatio) - i.negativeScrollAdjustment);
    updateGeometry(element);

    e.stopPropagation();
--- a/src/js/plugin/handler/drag-scrollbar.js
+++ b/src/js/plugin/handler/drag-scrollbar.js
@@ -6,7 +6,8 @@
 var d = require('../../lib/dom')
  , h = require('../../lib/helper')
  , instances = require('../instances')
-  , updateGeometry = require('../update-geometry');
+  , updateGeometry = require('../update-geometry')
+  , updateScroll = require('../update-scroll');

 function bindMouseScrollXHandler(element, i) {
  var currentLeft = null;
@@ -14,7 +15,7 @@ function bindMouseScrollXHandler(element, i) {

  function updateScrollLeft(deltaX) {
    var newLeft = currentLeft + (deltaX * i.railXRatio);
-    var maxLeft = i.scrollbarXRail.getBoundingClientRect().left + (i.railXRatio * (i.railXWidth - i.scrollbarXWidth));
+    var maxLeft = Math.max(0, i.scrollbarXRail.getBoundingClientRect().left) + (i.railXRatio * (i.railXWidth - i.scrollbarXWidth));

    if (newLeft < 0) {
      i.scrollbarXLeft = 0;
@@ -25,7 +26,7 @@ function bindMouseScrollXHandler(element, i) {
    }

    var scrollLeft = h.toInt(i.scrollbarXLeft * (i.contentWidth - i.containerWidth) / (i.containerWidth - (i.railXRatio * i.scrollbarXWidth))) - i.negativeScrollAdjustment;
-    element.scrollLeft = scrollLeft;
+    updateScroll(element, 'left', scrollLeft);
  }

  var mouseMoveHandler = function (e) {
@@ -59,7 +60,7 @@ function bindMouseScrollYHandler(element, i) {

  function updateScrollTop(deltaY) {
    var newTop = currentTop + (deltaY * i.railYRatio);
-    var maxTop = i.scrollbarYRail.getBoundingClientRect().top + (i.railYRatio * (i.railYHeight - i.scrollbarYHeight));
+    var maxTop = Math.max(0, i.scrollbarYRail.getBoundingClientRect().top) + (i.railYRatio * (i.railYHeight - i.scrollbarYHeight));

    if (newTop < 0) {
      i.scrollbarYTop = 0;
@@ -70,7 +71,7 @@ function bindMouseScrollYHandler(element, i) {
    }

    var scrollTop = h.toInt(i.scrollbarYTop * (i.contentHeight - i.containerHeight) / (i.containerHeight - (i.railYRatio * i.scrollbarYHeight)));
-    element.scrollTop = scrollTop;
+    updateScroll(element, 'top', scrollTop);
  }

  var mouseMoveHandler = function (e) {
--- a/src/js/plugin/handler/keyboard.js
+++ b/src/js/plugin/handler/keyboard.js
@@ -5,7 +5,8 @@

 var h = require('../../lib/helper')
  , instances = require('../instances')
-  , updateGeometry = require('../update-geometry');
+  , updateGeometry = require('../update-geometry')
+  , updateScroll = require('../update-scroll');

 function bindKeyboardHandler(element, i) {
  var hovered = false;
@@ -80,6 +81,12 @@ function bindKeyboardHandler(element, i) {
      deltaY = 90;
      break;
    case 32: // space bar
+      if (e.shiftKey) {
+        deltaY = 90;
+      } else {
+        deltaY = -90;
+      }
+      break;
    case 34: // page down
      deltaY = -90;
      break;
@@ -101,8 +108,8 @@ function bindKeyboardHandler(element, i) {
      return;
    }

-    element.scrollTop = element.scrollTop - deltaY;
-    element.scrollLeft = element.scrollLeft + deltaX;
+    updateScroll(element, 'top', element.scrollTop - deltaY);
+    updateScroll(element, 'left', element.scrollLeft + deltaX);
    updateGeometry(element);

    shouldPrevent = shouldPreventDefault(deltaX, deltaY);
--- a/src/js/plugin/handler/mouse-wheel.js
+++ b/src/js/plugin/handler/mouse-wheel.js
@@ -3,9 +3,9 @@
 */
 'use strict';

-var h = require('../../lib/helper')
-  , instances = require('../instances')
-  , updateGeometry = require('../update-geometry');
+var instances = require('../instances')
+  , updateGeometry = require('../update-geometry')
+  , updateScroll = require('../update-scroll');

 function bindMouseWheelHandler(element, i) {
  var shouldPrevent = false;
@@ -80,13 +80,6 @@ function bindMouseWheelHandler(element, i) {
  }

  function mousewheelHandler(e) {
-    // FIXME: this is a quick fix for the select problem in FF and IE.
-    // If there comes an effective way to deal with the problem,
-    // this lines should be removed.
-    if (!h.env.isWebKit && element.querySelector('select:focus')) {
-      return;
-    }
-
    var delta = getDeltaFromEvent(e);

    var deltaX = delta[0];
@@ -100,24 +93,24 @@ function bindMouseWheelHandler(element, i) {
    if (!i.settings.useBothWheelAxes) {
      // deltaX will only be used for horizontal scrolling and deltaY will
      // only be used for vertical scrolling - this is the default
-      element.scrollTop = element.scrollTop - (deltaY * i.settings.wheelSpeed);
-      element.scrollLeft = element.scrollLeft + (deltaX * i.settings.wheelSpeed);
+      updateScroll(element, 'top', element.scrollTop - (deltaY * i.settings.wheelSpeed));
+      updateScroll(element, 'left', element.scrollLeft + (deltaX * i.settings.wheelSpeed));
    } else if (i.scrollbarYActive && !i.scrollbarXActive) {
      // only vertical scrollbar is active and useBothWheelAxes option is
      // active, so let's scroll vertical bar using both mouse wheel axes
      if (deltaY) {
-        element.scrollTop = element.scrollTop - (deltaY * i.settings.wheelSpeed);
+        updateScroll(element, 'top', element.scrollTop - (deltaY * i.settings.wheelSpeed));
      } else {
-        element.scrollTop = element.scrollTop + (deltaX * i.settings.wheelSpeed);
+        updateScroll(element, 'top', element.scrollTop + (deltaX * i.settings.wheelSpeed));
      }
      shouldPrevent = true;
    } else if (i.scrollbarXActive && !i.scrollbarYActive) {
      // useBothWheelAxes and only horizontal bar is active, so use both
      // wheel axes for horizontal bar
      if (deltaX) {
-        element.scrollLeft = element.scrollLeft + (deltaX * i.settings.wheelSpeed);
+        updateScroll(element, 'left', element.scrollLeft + (deltaX * i.settings.wheelSpeed));
      } else {
-        element.scrollLeft = element.scrollLeft - (deltaY * i.settings.wheelSpeed);
+        updateScroll(element, 'left', element.scrollLeft - (deltaY * i.settings.wheelSpeed));
      }
      shouldPrevent = true;
    }
--- a/src/js/plugin/handler/selection.js
+++ b/src/js/plugin/handler/selection.js
@@ -5,7 +5,8 @@

 var h = require('../../lib/helper')
  , instances = require('../instances')
-  , updateGeometry = require('../update-geometry');
+  , updateGeometry = require('../update-geometry')
+  , updateScroll = require('../update-scroll');

 function bindSelectionHandler(element, i) {
  function getRangeNode() {
@@ -28,8 +29,8 @@ function bindSelectionHandler(element, i) {
          return;
        }

-        element.scrollTop = element.scrollTop + scrollDiff.top;
-        element.scrollLeft = element.scrollLeft + scrollDiff.left;
+        updateScroll(element, 'top', element.scrollTop + scrollDiff.top);
+        updateScroll(element, 'left', element.scrollLeft + scrollDiff.left);
        updateGeometry(element);
      }, 50); // every .1 sec
    }
--- a/src/js/plugin/handler/touch.js
+++ b/src/js/plugin/handler/touch.js
@@ -4,7 +4,8 @@
 'use strict';

 var instances = require('../instances')
-  , updateGeometry = require('../update-geometry');
+  , updateGeometry = require('../update-geometry')
+  , updateScroll = require('../update-scroll');

 function bindTouchHandler(element, i, supportsTouch, supportsIePointer) {
  function shouldPreventDefault(deltaX, deltaY) {
@@ -33,8 +34,8 @@ function bindTouchHandler(element, i, supportsTouch, supportsIePointer) {
  }

  function applyTouchMove(differenceX, differenceY) {
-    element.scrollTop = element.scrollTop - differenceY;
-    element.scrollLeft = element.scrollLeft - differenceX;
+    updateScroll(element, 'top', element.scrollTop - differenceY);
+    updateScroll(element, 'left', element.scrollLeft - differenceX);

    updateGeometry(element);
  }
--- a/src/js/plugin/initialize.js
+++ b/src/js/plugin/initialize.js
@@ -31,7 +31,10 @@ module.exports = function (element, userSettings) {
  dragScrollbarHandler(element);
  mouseWheelHandler(element);
  nativeScrollHandler(element);
-  selectionHandler(element);
+
+  if (i.settings.useSelectionScroll) {
+    selectionHandler(element);
+  }

  if (h.env.supportsTouch || h.env.supportsIePointer) {
    touchHandler(element, h.env.supportsTouch, h.env.supportsIePointer);
--- a/src/js/plugin/instances.js
+++ b/src/js/plugin/instances.js
@@ -35,6 +35,7 @@ function Instance(element) {

  i.scrollbarXRail = d.appendTo(d.e('div', 'ps-scrollbar-x-rail'), element);
  i.scrollbarX = d.appendTo(d.e('div', 'ps-scrollbar-x'), i.scrollbarXRail);
+  i.scrollbarX.setAttribute('tabindex', 0);
  i.scrollbarXActive = null;
  i.scrollbarXWidth = null;
  i.scrollbarXLeft = null;
@@ -51,6 +52,7 @@ function Instance(element) {

  i.scrollbarYRail = d.appendTo(d.e('div', 'ps-scrollbar-y-rail'), element);
  i.scrollbarY = d.appendTo(d.e('div', 'ps-scrollbar-y'), i.scrollbarYRail);
+  i.scrollbarY.setAttribute('tabindex', 0);
  i.scrollbarYActive = null;
  i.scrollbarYHeight = null;
  i.scrollbarYTop = null;
--- a/src/js/plugin/update-geometry.js
+++ b/src/js/plugin/update-geometry.js
@@ -6,7 +6,8 @@
 var cls = require('../lib/class')
  , d = require('../lib/dom')
  , h = require('../lib/helper')
-  , instances = require('./instances');
+  , instances = require('./instances')
+  , updateScroll = require('./update-scroll');

 function getThumbSize(i, thumbSize) {
  if (i.settings.minScrollbarLength) {
@@ -60,10 +61,23 @@ module.exports = function (element) {
  i.contentWidth = element.scrollWidth;
  i.contentHeight = element.scrollHeight;

+  var existingRails;
  if (!element.contains(i.scrollbarXRail)) {
+    existingRails = d.queryChildren(element, '.ps-scrollbar-x-rail');
+    if (existingRails.length > 0) {
+      existingRails.forEach(function (rail) {
+        d.remove(rail);
+      });
+    }
    d.appendTo(i.scrollbarXRail, element);
  }
  if (!element.contains(i.scrollbarYRail)) {
+    existingRails = d.queryChildren(element, '.ps-scrollbar-y-rail');
+    if (existingRails.length > 0) {
+      existingRails.forEach(function (rail) {
+        d.remove(rail);
+      });
+    }
    d.appendTo(i.scrollbarYRail, element);
  }

@@ -75,9 +89,6 @@ module.exports = function (element) {
    i.scrollbarXLeft = h.toInt((i.negativeScrollAdjustment + element.scrollLeft) * (i.railXWidth - i.scrollbarXWidth) / (i.contentWidth - i.containerWidth));
  } else {
    i.scrollbarXActive = false;
-    i.scrollbarXWidth = 0;
-    i.scrollbarXLeft = 0;
-    element.scrollLeft = 0;
  }

  if (!i.settings.suppressScrollY && i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight) {
@@ -88,9 +99,6 @@ module.exports = function (element) {
    i.scrollbarYTop = h.toInt(element.scrollTop * (i.railYHeight - i.scrollbarYHeight) / (i.contentHeight - i.containerHeight));
  } else {
    i.scrollbarYActive = false;
-    i.scrollbarYHeight = 0;
-    i.scrollbarYTop = 0;
-    element.scrollTop = 0;
  }

  if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) {
@@ -102,6 +110,20 @@ module.exports = function (element) {

  updateCss(element, i);

-  cls[i.scrollbarXActive ? 'add' : 'remove'](element, 'ps-active-x');
-  cls[i.scrollbarYActive ? 'add' : 'remove'](element, 'ps-active-y');
+  if (i.scrollbarXActive) {
+    cls.add(element, 'ps-active-x');
+  } else {
+    cls.remove(element, 'ps-active-x');
+    i.scrollbarXWidth = 0;
+    i.scrollbarXLeft = 0;
+    updateScroll(element, 'left', 0);
+  }
+  if (i.scrollbarYActive) {
+    cls.add(element, 'ps-active-y');
+  } else {
+    cls.remove(element, 'ps-active-y');
+    i.scrollbarYHeight = 0;
+    i.scrollbarYTop = 0;
+    updateScroll(element, 'top', 0);
+  }
 };
--- a/src/js/plugin/update-scroll.js
+++ b/src/js/plugin/update-scroll.js
@@ -0,0 +1,105 @@
+/* Copyright (c) 2015 Hyunje Alex Jun and other contributors
+ * Licensed under the MIT License
+ */
+'use strict';
+
+var instances = require('./instances');
+
+var upEvent = document.createEvent('Event')
+  , downEvent = document.createEvent('Event')
+  , leftEvent = document.createEvent('Event')
+  , rightEvent = document.createEvent('Event')
+  , yEvent = document.createEvent('Event')
+  , xEvent = document.createEvent('Event')
+  , xStartEvent = document.createEvent('Event')
+  , xEndEvent = document.createEvent('Event')
+  , yStartEvent = document.createEvent('Event')
+  , yEndEvent = document.createEvent('Event')
+  , lastTop
+  , lastLeft;
+
+upEvent.initEvent('ps-scroll-up', true, true);
+downEvent.initEvent('ps-scroll-down', true, true);
+leftEvent.initEvent('ps-scroll-left', true, true);
+rightEvent.initEvent('ps-scroll-right', true, true);
+yEvent.initEvent('ps-scroll-y', true, true);
+xEvent.initEvent('ps-scroll-x', true, true);
+xStartEvent.initEvent('ps-x-reach-start', true, true);
+xEndEvent.initEvent('ps-x-reach-end', true, true);
+yStartEvent.initEvent('ps-y-reach-start', true, true);
+yEndEvent.initEvent('ps-y-reach-end', true, true);
+
+module.exports = function (element, axis, value) {
+  if (typeof element === 'undefined') {
+    throw 'You must provide an element to the update-scroll function';
+  }
+
+  if (typeof axis === 'undefined') {
+    throw 'You must provide an axis to the update-scroll function';
+  }
+
+  if (typeof value === 'undefined') {
+    throw 'You must provide a value to the update-scroll function';
+  }
+
+  if (axis === 'top' && value <= 0) {
+    element.scrollTop = 0;
+    element.dispatchEvent(yStartEvent);
+    return; // don't allow negative scroll
+  }
+
+  if (axis === 'left' && value <= 0) {
+    element.scrollLeft = 0;
+    element.dispatchEvent(xStartEvent);
+    return; // don't allow negative scroll
+  }
+
+  var i = instances.get(element);
+
+  if (axis === 'top' && value >= i.contentHeight - i.containerHeight) {
+    element.scrollTop = i.contentHeight - i.containerHeight;
+    element.dispatchEvent(yEndEvent);
+    return; // don't allow scroll past container
+  }
+
+  if (axis === 'left' && value >= i.contentWidth - i.containerWidth) {
+    element.scrollLeft = i.contentWidth - i.containerWidth;
+    element.dispatchEvent(xEndEvent);
+    return; // don't allow scroll past container
+  }
+
+  if (!lastTop) {
+    lastTop = element.scrollTop;
+  }
+
+  if (!lastLeft) {
+    lastLeft = element.scrollLeft;
+  }
+
+  if (axis === 'top' && value < lastTop) {
+    element.dispatchEvent(upEvent);
+  }
+
+  if (axis === 'top' && value > lastTop) {
+    element.dispatchEvent(downEvent);
+  }
+
+  if (axis === 'left' && value < lastLeft) {
+    element.dispatchEvent(leftEvent);
+  }
+
+  if (axis === 'left' && value > lastLeft) {
+    element.dispatchEvent(rightEvent);
+  }
+
+  if (axis === 'top') {
+    element.scrollTop = lastTop = value;
+    element.dispatchEvent(yEvent);
+  }
+
+  if (axis === 'left') {
+    element.scrollLeft = lastLeft = value;
+    element.dispatchEvent(xEvent);
+  }
+
+};
--- a/src/js/plugin/update.js
+++ b/src/js/plugin/update.js
@@ -6,7 +6,8 @@
 var d = require('../lib/dom')
  , h = require('../lib/helper')
  , instances = require('./instances')
-  , updateGeometry = require('./update-geometry');
+  , updateGeometry = require('./update-geometry')
+  , updateScroll = require('./update-scroll');

 module.exports = function (element) {
  var i = instances.get(element);
@@ -30,6 +31,10 @@ module.exports = function (element) {

  updateGeometry(element);

+  // Update top/left scroll to trigger events
+  updateScroll(element, 'top', element.scrollTop);
+  updateScroll(element, 'left', element.scrollLeft);
+
  d.css(i.scrollbarXRail, 'display', '');
  d.css(i.scrollbarYRail, 'display', '');
 };
Author	SHA1	Message	Date
Hyunje Alex Jun	31434f81d4	Release 0.6.8 1. Fix broken drag scrolling out of viewport 2. Fix untriggered scroll events 3. Remove select element hack for Firefox 4. Set scrollbar size to 0 when inactive 5. Add tabindex properties to scrollbars	2015-12-10 13:46:20 +09:00
Hyunje Alex Jun	8a3ed6d0b7	Add tabindex properties to scrollbars Resolve #425	2015-12-10 13:36:19 +09:00
Hyunje Alex Jun	1dfbbe9e56	Set scrollbar size to 0 when inactive Resolve #415	2015-12-10 13:17:59 +09:00
Hyunje Alex Jun	eb02d5ae65	Remove select element hack for Firefox The select scrolling bug has been resolved in the latest version of Firefox. Resolve #311	2015-12-10 12:59:23 +09:00
DanielApt	6e32d3ddce	Merge pull request #420 from axelboc/master Dispatch custom events on `update` and fix scroll-end event not being triggered when dragging	2015-11-19 23:46:44 +00:00
Axel Bocciarelli	9f9f15f83c	fix lint error	2015-11-19 11:50:31 +11:00
Axel Bocciarelli	7e04a2e72b	trigger events on update Dispatch the custom events on `Ps.update`: ``` container.scrollTop = 50; Ps.update(container); ``` This is useful for controlling the scroll position via left/right arrows and enabling/disabling these arrows on scroll or when the start/end is reached. This also allows for the events to be dispatched on page load by calling `Ps.update` right after `Ps.initialise`.	2015-11-19 11:26:28 +11:00
Axel Bocciarelli	24b34d3dea	fix scroll-end events not triggered ... when dragging the scrollbar to the end with the mouse.	2015-11-19 11:05:57 +11:00
DanielApt	e1910cde3e	use pageX/YOffset instead of scrollX/Y As pointed out by @pliasetski these properties are not supported in IE11 and below This fixes #409	2015-11-16 22:25:11 +00:00
DanielApt	bbf3d4db9f	Remove usages of scrollbarYTop and scrollbarXLeft #390	2015-11-10 22:41:56 +00:00
DanielApt	3b134d6193	Fix broken drag scrolling when left is out of viewport Related to #390	2015-11-09 23:11:33 +00:00
DanielApt	e9024292cd	Fix broken drag scrolling when top is out of viewport Addresses issue no. 390 #390	2015-11-08 22:03:35 +00:00
Hyunje Alex Jun	fd53ae0b48	Add a custom release NPM script.	2015-10-03 21:50:46 +09:00
Hyunje Alex Jun	66fd8bfd6a	Release 0.6.7 Quick fix for 0.6.6.	2015-10-03 21:48:58 +09:00
Hyunje Alex Jun	4aa28add99	Add missing '.min' in compressed JS files	2015-10-03 21:48:02 +09:00
Hyunje Alex Jun	d6ede33202	Release 0.6.6 1. Add custom events 2. Support higher Node.js versions 3. Add useSelectionScroll option 4. Bug fixes	2015-10-03 21:44:26 +09:00
Hyunje Alex Jun	1c3b409d12	Remove 'bump' and 'release' tasks from gulpfile.js There is only one JSON left for the project and it's better to bump the version manually.	2015-10-03 21:43:59 +09:00
Hyunje Alex Jun	17e5f67519	Make selection scroll optional It's not essential but rather causes several problems.	2015-10-03 21:37:24 +09:00
Hyunje Alex Jun	002034fd54	Return an Array object from class.list To fix #383	2015-10-03 21:21:56 +09:00
Hyunje Alex Jun	8761735a54	Update Travis CI and NPM configuration To be compatible with their newest versions.	2015-10-03 21:16:23 +09:00
Hyunje Alex Jun	c285521caa	Lint update-scroll.js With the new .eslintrc	2015-10-03 20:45:38 +09:00
Hyunje Alex Jun	3d2d50c308	Update .eslintrc To make it compatible with new versions of ESLint and specify other options.	2015-10-03 20:44:38 +09:00
DanielApt	a0d39e1b49	Make sure scroll is at the start/end when the reach start/end event fires	2015-09-29 15:28:58 +01:00
DanielApt	e288476ba0	Update README.md with new events	2015-09-28 11:13:25 +01:00
DanielApt	e9bc40bd37	Update events example to show new reach events	2015-09-28 11:09:51 +01:00
DanielApt	0b8fe0ac0b	Dispatch events when reaching start / end of axes	2015-09-28 11:08:59 +01:00
Jun	a3676556b2	Merge pull request #386 from DanielApt/events Dispatch scroll events	2015-09-24 19:44:31 +09:00
DanielApt	39893fc6f2	Add example for events	2015-09-24 11:02:33 +01:00
DanielApt	6c5b9d249e	Add missing parentheses	2015-09-24 09:53:59 +01:00
DanielApt	2ef7e81ce9	Add Events to the README	2015-09-23 21:05:28 +01:00
DanielApt	3b90c734e4	Dispatch custom scroll events with new updateScroll function	2015-09-23 20:49:37 +01:00
Hyunje Alex Jun	afebe908b1	NPM version bump. https://github.com/npm/npm-registry-couchapp/issues/148	2015-08-18 04:16:20 +09:00
Hyunje Alex Jun	6cbb4a9b9d	Release 0.6.5 1. Add shift+space support. 2. Bug fixes.	2015-08-18 03:54:56 +09:00
Hyunje Alex Jun	51f33a44b5	Remove unused garbage rails before append a new one. This patch fixes #376.	2015-08-18 03:51:12 +09:00
Hyunje Alex Jun	8eac54d49f	Add a queryChildren method to dom.js	2015-08-18 03:26:15 +09:00
Hyunje Alex Jun	ed4e335978	Declare a module object DOM in dom.js To refer in the sibling methods.	2015-08-18 03:23:27 +09:00
Jun	272bb4983a	Merge pull request #379 from srcn/master Add shift+space support for keyboard	2015-08-17 21:43:02 +09:00
srcn	f200bea4cc	add shift+space support for keyboard	2015-08-17 15:19:30 +03:00