Release 0.6.3

1. Improve toInt 2. Stop propagating click event through scrollbar rails. 3. IE touch device fix. 4. RTL support. 5. Other minor fixes.
Chmod 644 README.md
2015-06-22 22:21:25 +09:00 · 2015-06-22 21:38:43 +09:00 · 2015-06-22 21:36:43 +09:00 · 2015-06-22 21:28:47 +09:00 · 2015-06-17 13:02:22 +09:00 · 2015-06-16 15:43:00 -04:00
15 changed files with 203 additions and 62 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,14 @@
+# EditorConfig: http://editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Indentation for JS & SCSS
+[*.{js, scss}]
+indent_style = space
+indent_size = 2
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
 .DS_Store
 node_modules
 /dist
-.idea
+.idea
--- a/README.md
+++ b/README.md
@@ -46,6 +46,7 @@ I hope you love it!
  to update the size or position of the scrollbar, just update.
 * Additionally, perfect-scrollbar uses 'scrollTop' and 'scrollLeft',
  not absolute positioning or something messy.
+* perfect-scrollbar supports RTL perfectly on both WebKit and Gecko based browsers.

 It's cool, isn't it?

@@ -199,6 +200,66 @@ $('#container').perfectScrollbar('update');  // Update
 $('#container').perfectScrollbar('destroy'); // Destroy
 ```

+## RequireJS  usage
+
+For RequireJS loader, no need to write shim, simply import two libs:
+
+```javascript
+require.config({
+  paths: {
+    perfectScrollbarJQuery: '.../perfect-scrollbar.jquery',
+    perfectScrollbar: '.../perfect-scrollbar',
+  }
+  ...
+})
+```
+
+
+and load `perfectScrollbar` in the initialiser of your app:
+
+```javascript
+# for vanilla JS:
+window.Ps = require('perfectScrollbar');
+
+# for jQuery:
+require('perfectScrollbarJQuery');
+```
+
+
+## AngularJS + RequireJS usage
+
+With the require.config settings above, at the beginning of your app module
+definition, you can have following code:
+
+```javascript
+define([
+  'angular',
+  'perfectScrollbar',
+  'perfectScrollbarJquery'
+],
+function (angular) {
+  var myApp = angular.module('myApp', [])
+  .run(function() {
+    window.Ps = require('perfectScrollbar');
+    require('perfectScrollbarJQuery');
+  })
+  return myApp;
+});
+```
+
+And initialise perfectScrollbar in a controller:
+
+```javascript
+# by vanilla JS:
+var container = document.getElementById('imgLoader');
+Ps.initialize(container);
+Ps.update(container);
+
+# or by jQuery:
+var imgLoader = $("#imgLoader")
+imgLoader.perfectScrollbar();
+```
+
 ## Optional parameters

 perfect-scrollbar supports optional parameters.
--- a/examples/scrollbars-with-margin.html
+++ b/examples/scrollbars-with-margin.html
@@ -6,27 +6,39 @@
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
-      .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
-      .spacer { text-align:center }
+      h1 { 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; }

-      .ps-scrollbar-x-rail {
-        margin: 0 3px;
+      .large-margin .ps-scrollbar-x-rail {
+        margin: 0 25%;
+        opacity: 0.5;
+        background-color: #eee;
      }
-      .ps-scrollbar-y-rail {
-        margin: 3px 0;
+      .large-margin .ps-scrollbar-y-rail {
+        margin: 100px 0;
+        opacity: 0.5;
+        background-color: #eee;
      }
    </style>
  </head>
  <body>
-    <div id="Default" class="contentHolder">
+    <h1>Default</h1>
+    <div class="container">
+      <div class="content">
+      </div>
+    </div>
+
+    <h1>Margins</h1>
+    <div class="container large-margin">
      <div class="content">
      </div>
    </div>
    <script>
-      var $ = document.querySelector.bind(document);
      window.onload = function () {
-        Ps.initialize($('#Default'));
+        [].forEach.call(document.querySelectorAll('.container'), function (el) {
+          Ps.initialize(el);
+        });
      };
    </script>
  </body>
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,6 +5,7 @@ var gulp = require('gulp')
  , bump = require('gulp-bump')
  , connect = require('gulp-connect')
  , eslint = require('gulp-eslint')
+  , insert = require('gulp-insert')
  , rename = require('gulp-rename')
  , rimraf = require('gulp-rimraf')
  , sass = require('gulp-sass')
@@ -12,6 +13,8 @@ var gulp = require('gulp')
  , uglify = require('gulp-uglify')
  , zip = require('gulp-zip');

+var version = '/* perfect-scrollbar v' + require('./package').version + ' */\n';
+
 gulp.task('lint', function () {
  return gulp.src(['./src/**/*.js', './gulpfile.js'])
    .pipe(eslint())
@@ -39,6 +42,7 @@ function browserified() {
 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';
@@ -54,6 +58,7 @@ 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';
@@ -77,6 +82,7 @@ gulp.task('clean:css:min', function () {
 gulp.task('sass', ['clean:css'], function () {
  return gulp.src('./src/css/main.scss')
    .pipe(sass())
+    .pipe(insert.prepend(version))
    .pipe(rename('perfect-scrollbar.css'))
    .pipe(gulp.dest('./dist/css'))
    .pipe(connect.reload());
@@ -85,6 +91,7 @@ gulp.task('sass', ['clean:css'], function () {
 gulp.task('sass:min', ['clean:css:min'], function () {
  return gulp.src('./src/css/main.scss')
    .pipe(sass({outputStyle: 'compressed'}))
+    .pipe(insert.prepend(version))
    .pipe(rename('perfect-scrollbar.min.css'))
    .pipe(gulp.dest('./dist/css'));
 });
@@ -118,7 +125,7 @@ gulp.task('connect', ['build'], function () {

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

 gulp.task('serve', ['connect', 'watch']);
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "perfect-scrollbar",
-  "version": "0.6.1",
+  "version": "0.6.3",
  "description": "Minimalistic but perfect custom scrollbar plugin",
  "author": "Hyunje Alex Jun <me@noraesae.net>",
  "contributors": [
@@ -32,6 +32,7 @@
    "gulp-bump": "^0.1.11",
    "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",
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -4,13 +4,6 @@ $ps-bar-default: #aaa;
 $ps-bar-hover: #999;

 // Helper mixins
-@mixin opacity($o) {
-  $IEValue: $o * 100;
-  opacity: $o;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
-      filter: alpha(opacity=$IEValue);
-}
-
@mixin border-radius($r) {
  -webkit-border-radius: $r;
     -moz-border-radius: $r;
@@ -30,13 +23,13 @@ $ps-bar-hover: #999;
  display: none;
  position: absolute; /* please don't change 'position' */
  @include border-radius(4px);
-  @include opacity(0);
+  opacity: 0;
  @include transition(background-color .2s linear, opacity .2s linear);
 }

@mixin scrollbar-rail-hover {
  background-color: $ps-rail-hover;
-  @include opacity(0.9);
+  opacity: 0.9;
 }

@mixin scrollbar-default {
@@ -69,6 +62,7 @@ $ps-bar-hover: #999;
 }

 .ps-container {
+  -ms-touch-action: none;
  overflow: hidden !important;

  &.ps-active-x > .ps-scrollbar-x-rail,
@@ -107,7 +101,7 @@ $ps-bar-hover: #999;

    >.ps-scrollbar-x-rail,
    >.ps-scrollbar-y-rail {
-      @include opacity(0.6);
+      opacity: 0.6;
    }

    >.ps-scrollbar-x-rail:hover {
--- a/src/js/lib/dom.js
+++ b/src/js/lib/dom.js
@@ -70,6 +70,8 @@ exports.remove = function (element) {
  if (typeof element.remove !== 'undefined') {
    element.remove();
  } else {
-    element.parentNode.removeChild(element);
+    if (element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
  }
 };
--- a/src/js/lib/helper.js
+++ b/src/js/lib/helper.js
@@ -7,11 +7,7 @@ var cls = require('./class')
  , d = require('./dom');

 exports.toInt = function (x) {
-  if (typeof x === 'string') {
-    return parseInt(x, 10);
-  } else {
-    return ~~x;
-  }
+  return parseInt(x, 10) || 0;
 };

 exports.clone = function (obj) {
--- a/src/js/plugin/handler/click-rail.js
+++ b/src/js/plugin/handler/click-rail.js
@@ -16,8 +16,8 @@ function bindClickRailHandler(element, i) {
  i.event.bind(i.scrollbarY, 'click', stopPropagation);
  i.event.bind(i.scrollbarYRail, 'click', function (e) {
    var halfOfScrollbarLength = h.toInt(i.scrollbarYHeight / 2);
-    var positionTop = e.pageY - pageOffset(i.scrollbarYRail).top - halfOfScrollbarLength;
-    var maxPositionTop = i.containerHeight - i.scrollbarYHeight;
+    var positionTop = i.railYRatio * (e.pageY - window.scrollY - pageOffset(i.scrollbarYRail).top - halfOfScrollbarLength);
+    var maxPositionTop = i.railYRatio * (i.railYHeight - i.scrollbarYHeight);
    var positionRatio = positionTop / maxPositionTop;

    if (positionRatio < 0) {
@@ -28,14 +28,15 @@ function bindClickRailHandler(element, i) {

    element.scrollTop = (i.contentHeight - i.containerHeight) * positionRatio;
    updateGeometry(element);
+
+    e.stopPropagation();
  });

  i.event.bind(i.scrollbarX, 'click', stopPropagation);
  i.event.bind(i.scrollbarXRail, 'click', function (e) {
    var halfOfScrollbarLength = h.toInt(i.scrollbarXWidth / 2);
-    var positionLeft = e.pageX - pageOffset(i.scrollbarXRail).left - halfOfScrollbarLength;
-    console.log(e.pageX, i.scrollbarXRail.offsetLeft);
-    var maxPositionLeft = i.containerWidth - i.scrollbarXWidth;
+    var positionLeft = i.railXRatio * (e.pageX - window.scrollX - pageOffset(i.scrollbarXRail).left - halfOfScrollbarLength);
+    var maxPositionLeft = i.railXRatio * (i.railXWidth - i.scrollbarXWidth);
    var positionRatio = positionLeft / maxPositionLeft;

    if (positionRatio < 0) {
@@ -44,8 +45,10 @@ function bindClickRailHandler(element, i) {
      positionRatio = 1;
    }

-    element.scrollLeft = (i.contentWidth - i.containerWidth) * positionRatio;
+    element.scrollLeft = ((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
@@ -13,8 +13,8 @@ function bindMouseScrollXHandler(element, i) {
  var currentPageX = null;

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

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

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

@@ -42,7 +42,7 @@ function bindMouseScrollXHandler(element, i) {

  i.event.bind(i.scrollbarX, 'mousedown', function (e) {
    currentPageX = e.pageX;
-    currentLeft = h.toInt(d.css(i.scrollbarX, 'left'));
+    currentLeft = h.toInt(d.css(i.scrollbarX, 'left')) * i.railXRatio;
    h.startScrolling(element, 'x');

    i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
@@ -58,8 +58,8 @@ function bindMouseScrollYHandler(element, i) {
  var currentPageY = null;

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

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

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

@@ -87,7 +87,7 @@ function bindMouseScrollYHandler(element, i) {

  i.event.bind(i.scrollbarY, 'mousedown', function (e) {
    currentPageY = e.pageY;
-    currentTop = h.toInt(d.css(i.scrollbarY, 'top'));
+    currentTop = h.toInt(d.css(i.scrollbarY, 'top')) * i.railYRatio;
    h.startScrolling(element, 'y');

    i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
--- a/src/js/plugin/handler/mouse-wheel.js
+++ b/src/js/plugin/handler/mouse-wheel.js
@@ -58,6 +58,27 @@ function bindMouseWheelHandler(element, i) {
    return [deltaX, deltaY];
  }

+  function shouldBeConsumedByTextarea(deltaX, deltaY) {
+    var hoveredTextarea = element.querySelector('textarea:hover');
+    if (hoveredTextarea) {
+      var maxScrollTop = hoveredTextarea.scrollHeight - hoveredTextarea.clientHeight;
+      if (maxScrollTop > 0) {
+        if (!(hoveredTextarea.scrollTop === 0 && deltaY > 0) &&
+            !(hoveredTextarea.scrollTop === maxScrollTop && deltaY < 0)) {
+          return true;
+        }
+      }
+      var maxScrollLeft = hoveredTextarea.scrollLeft - hoveredTextarea.clientWidth;
+      if (maxScrollLeft > 0) {
+        if (!(hoveredTextarea.scrollLeft === 0 && deltaX < 0) &&
+            !(hoveredTextarea.scrollLeft === maxScrollLeft && deltaX > 0)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
  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,
@@ -71,6 +92,10 @@ function bindMouseWheelHandler(element, i) {
    var deltaX = delta[0];
    var deltaY = delta[1];

+    if (shouldBeConsumedByTextarea(deltaX, deltaY)) {
+      return;
+    }
+
    shouldPrevent = false;
    if (!i.settings.useBothWheelAxes) {
      // deltaX will only be used for horizontal scrolling and deltaY will
--- a/src/js/plugin/instances.js
+++ b/src/js/plugin/instances.js
@@ -21,6 +21,15 @@ function Instance(element) {
  i.contentHeight = null;

  i.isRtl = d.css(element, 'direction') === "rtl";
+  i.isNegativeScroll = (function () {
+    var originalScrollLeft = element.scrollLeft;
+    var result = null;
+    element.scrollLeft = -1;
+    result = element.scrollLeft < 0;
+    element.scrollLeft = originalScrollLeft;
+    return result;
+  })();
+  i.negativeScrollAdjustment = i.isNegativeScroll ? element.scrollWidth - element.clientWidth : 0;
  i.event = new EventManager();
  i.ownerDocument = element.ownerDocument || document;

@@ -33,8 +42,12 @@ function Instance(element) {
  i.isScrollbarXUsingBottom = i.scrollbarXBottom === i.scrollbarXBottom; // !isNaN
  i.scrollbarXTop = i.isScrollbarXUsingBottom ? null : h.toInt(d.css(i.scrollbarXRail, 'top'));
  i.railBorderXWidth = h.toInt(d.css(i.scrollbarXRail, 'borderLeftWidth')) + h.toInt(d.css(i.scrollbarXRail, 'borderRightWidth'));
+  // Set rail to display:block to calculate margins
+  d.css(i.scrollbarXRail, 'display', 'block');
  i.railXMarginWidth = h.toInt(d.css(i.scrollbarXRail, 'marginLeft')) + h.toInt(d.css(i.scrollbarXRail, 'marginRight'));
+  d.css(i.scrollbarXRail, 'display', '');
  i.railXWidth = null;
+  i.railXRatio = null;

  i.scrollbarYRail = d.appendTo(d.e('div', 'ps-scrollbar-y-rail'), element);
  i.scrollbarY = d.appendTo(d.e('div', 'ps-scrollbar-y'), i.scrollbarYRail);
@@ -46,8 +59,11 @@ function Instance(element) {
  i.scrollbarYLeft = i.isScrollbarYUsingRight ? null : h.toInt(d.css(i.scrollbarYRail, 'left'));
  i.scrollbarYOuterWidth = i.isRtl ? h.outerWidth(i.scrollbarY) : null;
  i.railBorderYWidth = h.toInt(d.css(i.scrollbarYRail, 'borderTopWidth')) + h.toInt(d.css(i.scrollbarYRail, 'borderBottomWidth'));
+  d.css(i.scrollbarYRail, 'display', 'block');
  i.railYMarginHeight = h.toInt(d.css(i.scrollbarYRail, 'marginTop')) + h.toInt(d.css(i.scrollbarYRail, 'marginBottom'));
+  d.css(i.scrollbarYRail, 'display', '');
  i.railYHeight = null;
+  i.railYRatio = null;
 }

 function getId(element) {
--- a/src/js/plugin/update-geometry.js
+++ b/src/js/plugin/update-geometry.js
@@ -21,7 +21,7 @@ function getThumbSize(i, thumbSize) {
 function updateCss(element, i) {
  var xRailOffset = {width: i.railXWidth};
  if (i.isRtl) {
-    xRailOffset.left = element.scrollLeft + i.containerWidth - i.contentWidth;
+    xRailOffset.left = i.negativeScrollAdjustment + element.scrollLeft + i.containerWidth - i.contentWidth;
  } else {
    xRailOffset.left = element.scrollLeft;
  }
@@ -35,13 +35,13 @@ function updateCss(element, i) {
  var yRailOffset = {top: element.scrollTop, height: i.railYHeight};
  if (i.isScrollbarYUsingRight) {
    if (i.isRtl) {
-      yRailOffset.right = i.contentWidth - element.scrollLeft - i.scrollbarYRight - i.scrollbarYOuterWidth;
+      yRailOffset.right = i.contentWidth - (i.negativeScrollAdjustment + element.scrollLeft) - i.scrollbarYRight - i.scrollbarYOuterWidth;
    } else {
      yRailOffset.right = i.scrollbarYRight - element.scrollLeft;
    }
  } else {
    if (i.isRtl) {
-      yRailOffset.left = element.scrollLeft + i.containerWidth * 2 - i.contentWidth - i.scrollbarYLeft - i.scrollbarYOuterWidth;
+      yRailOffset.left = i.negativeScrollAdjustment + element.scrollLeft + i.containerWidth * 2 - i.contentWidth - i.scrollbarYLeft - i.scrollbarYOuterWidth;
    } else {
      yRailOffset.left = i.scrollbarYLeft + element.scrollLeft;
    }
@@ -60,11 +60,19 @@ module.exports = function (element) {
  i.contentWidth = element.scrollWidth;
  i.contentHeight = element.scrollHeight;

+  if (!element.contains(i.scrollbarXRail)) {
+    d.appendTo(i.scrollbarXRail, element);
+  }
+  if (!element.contains(i.scrollbarYRail)) {
+    d.appendTo(i.scrollbarYRail, element);
+  }
+
  if (!i.settings.suppressScrollX && i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth) {
    i.scrollbarXActive = true;
    i.railXWidth = i.containerWidth - i.railXMarginWidth;
+    i.railXRatio = i.containerWidth / i.railXWidth;
    i.scrollbarXWidth = getThumbSize(i, h.toInt(i.railXWidth * i.containerWidth / i.contentWidth));
-    i.scrollbarXLeft = h.toInt(element.scrollLeft * (i.railXWidth - i.scrollbarXWidth) / (i.contentWidth - i.containerWidth));
+    i.scrollbarXLeft = h.toInt((i.negativeScrollAdjustment + element.scrollLeft) * (i.railXWidth - i.scrollbarXWidth) / (i.contentWidth - i.containerWidth));
  } else {
    i.scrollbarXActive = false;
    i.scrollbarXWidth = 0;
@@ -75,6 +83,7 @@ module.exports = function (element) {
  if (!i.settings.suppressScrollY && i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight) {
    i.scrollbarYActive = true;
    i.railYHeight = i.containerHeight - i.railYMarginHeight;
+    i.railYRatio = i.containerHeight / i.railYHeight;
    i.scrollbarYHeight = getThumbSize(i, h.toInt(i.railYHeight * i.containerHeight / i.contentHeight));
    i.scrollbarYTop = h.toInt(element.scrollTop * (i.railYHeight - i.scrollbarYHeight) / (i.contentHeight - i.containerHeight));
  } else {
--- a/src/js/plugin/update.js
+++ b/src/js/plugin/update.js
@@ -4,27 +4,28 @@
 'use strict';

 var d = require('../lib/dom')
-  , destroy = require('./destroy')
-  , initialize = require('./initialize')
+  , h = require('../lib/helper')
  , instances = require('./instances')
  , updateGeometry = require('./update-geometry');

 module.exports = function (element) {
  var i = instances.get(element);

-  if (!i.scrollbarXRail || !element.contains(i.scrollbarXRail) ||
-      !i.scrollbarYRail || !element.contains(i.scrollbarYRail)) {
-    // If there's something wrong in the plugin, re-initialise.
-    destroy(element);
-    initialize(element);
-  } else {
-    // Hide scrollbars not to affect scrollWidth and scrollHeight
-    d.css(i.scrollbarXRail, 'display', 'none');
-    d.css(i.scrollbarYRail, 'display', 'none');
+  // Recalcuate negative scrollLeft adjustment
+  i.negativeScrollAdjustment = i.isNegativeScroll ? element.scrollWidth - element.clientWidth : 0;

-    updateGeometry(element);
+  // Recalculate rail margins
+  d.css(i.scrollbarXRail, 'display', 'block');
+  d.css(i.scrollbarYRail, 'display', 'block');
+  i.railXMarginWidth = h.toInt(d.css(i.scrollbarXRail, 'marginLeft')) + h.toInt(d.css(i.scrollbarXRail, 'marginRight'));
+  i.railYMarginHeight = h.toInt(d.css(i.scrollbarYRail, 'marginTop')) + h.toInt(d.css(i.scrollbarYRail, 'marginBottom'));

-    d.css(i.scrollbarXRail, 'display', 'block');
-    d.css(i.scrollbarYRail, 'display', 'block');
-  }
+  // Hide scrollbars not to affect scrollWidth and scrollHeight
+  d.css(i.scrollbarXRail, 'display', 'none');
+  d.css(i.scrollbarYRail, 'display', 'none');
+
+  updateGeometry(element);
+
+  d.css(i.scrollbarXRail, 'display', '');
+  d.css(i.scrollbarYRail, 'display', '');
 };
Author	SHA1	Message	Date
Hyunje Alex Jun	1f082a2e04	Release 0.6.3 1. Improve toInt 2. Stop propagating click event through scrollbar rails. 3. IE touch device fix. 4. RTL support. 5. Other minor fixes.	2015-06-22 22:21:25 +09:00
Hyunje Alex Jun	b19c5e0765	Chmod 644 README.md	2015-06-22 21:38:43 +09:00
ahspw	3dbf20a5d0	perfect RTL support	2015-06-22 21:36:43 +09:00
guandai	db855ceca1	update readme	2015-06-22 21:28:47 +09:00
Jun	84b74926e3	Merge pull request #347 from danthewolfe/ie-touch-device IE touch device fix	2015-06-17 13:02:22 +09:00
dan	d6bd30f2da	IE touch device fix Add vendor specific css for IE to handle let javascript handle touch events instead of letting css attempt to handle them. Without this CSS property IE touch devices do not work.	2015-06-16 15:43:00 -04:00
Hyunje Alex Jun	fc28ceb4ea	Stop propagating click event through scrollbar rails. Fixes #326.	2015-04-29 13:08:03 +09:00
Hyunje Alex Jun	ca4d835129	Simplify parseInt. Because `~~` isn't necessarily faster than `parseInt` in every browser. Now I think it'd be better to make it readable and simple.	2015-04-15 21:41:11 +09:00
Jun	88b4e2fc19	Merge pull request #321 from juxtapos/toInt-fix changed toInt()'s function behavior	2015-04-15 21:39:10 +09:00
Claus Augusti	de32082a62	changed the toInt()'s function behavior so that it returns 0 on empty strings	2015-04-15 13:56:38 +02:00
DanielApt	7ba25d020c	Add an editor config file	2015-04-14 13:57:45 +09:00
Jun	08d559561e	Merge pull request #320 from jaronkk/scrollbar-margins Support large and percentage margins on scrollbar rails	2015-04-14 13:56:47 +09:00
Jaron Kennel	046ce954fd	Fix gulp watch to call sass instead of css	2015-04-13 13:12:09 -04:00
Jaron Kennel	a40ab40695	Fix clicking and dragging the scrollbar rails with large margin values. Fix initial rail height/width calculation: Set the rails to display:block temporarily to correctly calculate percentage margins Account for scrolltop/left on the document.	2015-04-13 13:12:00 -04:00
Hyunje Alex Jun	2cd65684e2	Release 0.6.2 1. Reattach rails when removed. 2. Check if parentNode exists when DOM-removing. 3. Consume mousewheel event for hovered textarea. 4. Other minor fixes.	2015-04-11 02:24:49 +09:00
Hyunje Alex Jun	a0b3754a0d	Lint. Missing semicolon.	2015-04-11 02:24:49 +09:00
Hyunje Alex Jun	dc7b14d0e1	Consume mousewheel event when there's hovered textarea. Only when it needs to be scrolled.	2015-04-11 02:16:37 +09:00
Jun	a5aab04264	Merge pull request #309 from DanielApt/remove-patch Check if parentNode exists	2015-04-08 18:53:16 +09:00
DanielApt	aca7683de1	Change tab size to 2	2015-04-02 10:18:46 +01:00
Hyunje Alex Jun	c21cfb6ed0	Add version information to built files.	2015-04-02 02:10:25 +09:00
Hyunje Alex Jun	e4b21c7069	Remove -ms-filter for opacity. The plugin doesn't support old IEs.	2015-04-02 01:12:44 +09:00
DanielApt	bb58ab98e3	Fix failing test	2015-03-27 18:28:51 +00:00
DanielApt	633f1f53d3	Check if parentNode exists We need to check if parentNode exists, as in some scenarios it does not (e.g. phantomjs < 2)	2015-03-27 16:58:10 +00:00
Hyunje Alex Jun	4a7f27356a	Change the way to re-attach rails when they're detached. Instead of destroying and re-initialising the plugin, just re-append them.	2015-03-11 22:07:14 +09:00