Skip to content

Commit e39e0f0

Browse files
author
Hyunje Jun
committedJun 7, 2018
v1.4.0
Please refer to Releases for changelog. https://github.com/utatti/perfect-scrollbar/releases
1 parent 4617880 commit e39e0f0

8 files changed

+362
-322
lines changed
 

‎dist/perfect-scrollbar.common.js

+28-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*!
2-
* perfect-scrollbar v1.3.0
3-
* (c) 2017 Hyunje Jun
2+
* perfect-scrollbar v1.4.0
3+
* (c) 2018 Hyunje Jun
44
* @license MIT
55
*/
66
'use strict';
@@ -30,6 +30,7 @@ var elMatches =
3030
typeof Element !== 'undefined' &&
3131
(Element.prototype.matches ||
3232
Element.prototype.webkitMatchesSelector ||
33+
Element.prototype.mozMatchesSelector ||
3334
Element.prototype.msMatchesSelector);
3435

3536
function matches(element, query) {
@@ -64,6 +65,7 @@ var cls = {
6465
},
6566
state: {
6667
focus: 'ps--focus',
68+
clicking: 'ps--clicking',
6769
active: function (x) { return ("ps--active-" + x); },
6870
scrolling: function (x) { return ("ps--scrolling-" + x); },
6971
},
@@ -318,6 +320,7 @@ var env = {
318320

319321
var updateGeometry = function(i) {
320322
var element = i.element;
323+
var roundedScrollTop = Math.floor(element.scrollTop);
321324

322325
i.containerWidth = element.clientWidth;
323326
i.containerHeight = element.clientHeight;
@@ -369,7 +372,7 @@ var updateGeometry = function(i) {
369372
toInt(i.railYHeight * i.containerHeight / i.contentHeight)
370373
);
371374
i.scrollbarYTop = toInt(
372-
element.scrollTop *
375+
roundedScrollTop *
373376
(i.railYHeight - i.scrollbarYHeight) /
374377
(i.contentHeight - i.containerHeight)
375378
);
@@ -416,6 +419,8 @@ function getThumbSize(i, thumbSize) {
416419

417420
function updateCss(element, i) {
418421
var xRailOffset = { width: i.railXWidth };
422+
var roundedScrollTop = Math.floor(element.scrollTop);
423+
419424
if (i.isRtl) {
420425
xRailOffset.left =
421426
i.negativeScrollAdjustment +
@@ -426,13 +431,13 @@ function updateCss(element, i) {
426431
xRailOffset.left = element.scrollLeft;
427432
}
428433
if (i.isScrollbarXUsingBottom) {
429-
xRailOffset.bottom = i.scrollbarXBottom - element.scrollTop;
434+
xRailOffset.bottom = i.scrollbarXBottom - roundedScrollTop;
430435
} else {
431-
xRailOffset.top = i.scrollbarXTop + element.scrollTop;
436+
xRailOffset.top = i.scrollbarXTop + roundedScrollTop;
432437
}
433438
set(i.scrollbarXRail, xRailOffset);
434439

435-
var yRailOffset = { top: element.scrollTop, height: i.railYHeight };
440+
var yRailOffset = { top: roundedScrollTop, height: i.railYHeight };
436441
if (i.isScrollbarYUsingRight) {
437442
if (i.isRtl) {
438443
yRailOffset.right =
@@ -507,7 +512,8 @@ var dragThumb = function(i) {
507512
'scrollbarX',
508513
'scrollbarXWidth',
509514
'scrollLeft',
510-
'x' ]);
515+
'x',
516+
'scrollbarXRail' ]);
511517
bindMouseScrollHandler(i, [
512518
'containerHeight',
513519
'contentHeight',
@@ -516,7 +522,8 @@ var dragThumb = function(i) {
516522
'scrollbarY',
517523
'scrollbarYHeight',
518524
'scrollTop',
519-
'y' ]);
525+
'y',
526+
'scrollbarYRail' ]);
520527
};
521528

522529
function bindMouseScrollHandler(
@@ -531,6 +538,7 @@ function bindMouseScrollHandler(
531538
var scrollbarYHeight = ref[5];
532539
var scrollTop = ref[6];
533540
var y = ref[7];
541+
var scrollbarYRail = ref[8];
534542

535543
var element = i.element;
536544

@@ -550,6 +558,7 @@ function bindMouseScrollHandler(
550558

551559
function mouseUpHandler() {
552560
removeScrollingClass(i, y);
561+
i[scrollbarYRail].classList.remove(cls.state.clicking);
553562
i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
554563
}
555564

@@ -563,6 +572,8 @@ function bindMouseScrollHandler(
563572
i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
564573
i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
565574

575+
i[scrollbarYRail].classList.add(cls.state.clicking);
576+
566577
e.stopPropagation();
567578
e.preventDefault();
568579
});
@@ -575,7 +586,7 @@ var keyboard = function(i) {
575586
var scrollbarFocused = function () { return matches(i.scrollbarX, ':focus') || matches(i.scrollbarY, ':focus'); };
576587

577588
function shouldPreventDefault(deltaX, deltaY) {
578-
var scrollTop = element.scrollTop;
589+
var scrollTop = Math.floor(element.scrollTop);
579590
if (deltaX === 0) {
580591
if (!i.scrollbarYActive) {
581592
return false;
@@ -716,12 +727,13 @@ var wheel = function(i) {
716727
var element = i.element;
717728

718729
function shouldPreventDefault(deltaX, deltaY) {
730+
var roundedScrollTop = Math.floor(element.scrollTop);
719731
var isTop = element.scrollTop === 0;
720732
var isBottom =
721-
element.scrollTop + element.offsetHeight === element.scrollHeight;
733+
roundedScrollTop + element.offsetHeight === element.scrollHeight;
722734
var isLeft = element.scrollLeft === 0;
723735
var isRight =
724-
element.scrollLeft + element.offsetWidth === element.offsetWidth;
736+
element.scrollLeft + element.offsetWidth === element.scrollWidth;
725737

726738
var hitsBound;
727739

@@ -797,7 +809,7 @@ var wheel = function(i) {
797809
return true;
798810
}
799811
}
800-
var maxScrollLeft = cursor.scrollLeft - cursor.clientWidth;
812+
var maxScrollLeft = cursor.scrollWidth - cursor.clientWidth;
801813
if (maxScrollLeft > 0) {
802814
if (
803815
!(cursor.scrollLeft === 0 && deltaX < 0) &&
@@ -873,7 +885,7 @@ var touch = function(i) {
873885
var element = i.element;
874886

875887
function shouldPrevent(deltaX, deltaY) {
876-
var scrollTop = element.scrollTop;
888+
var scrollTop = Math.floor(element.scrollTop);
877889
var scrollLeft = element.scrollLeft;
878890
var magnitudeX = Math.abs(deltaX);
879891
var magnitudeY = Math.abs(deltaY);
@@ -1087,7 +1099,7 @@ var defaultSettings = function () { return ({
10871099
suppressScrollY: false,
10881100
swipeEasing: true,
10891101
useBothWheelAxes: false,
1090-
wheelPropagation: false,
1102+
wheelPropagation: true,
10911103
wheelSpeed: 1,
10921104
}); };
10931105

@@ -1218,7 +1230,7 @@ var PerfectScrollbar = function PerfectScrollbar(element, userSettings) {
12181230

12191231
this.settings.handlers.forEach(function (handlerName) { return handlers[handlerName](this$1); });
12201232

1221-
this.lastScrollTop = element.scrollTop; // for onScroll only
1233+
this.lastScrollTop = Math.floor(element.scrollTop); // for onScroll only
12221234
this.lastScrollLeft = element.scrollLeft; // for onScroll only
12231235
this.event.bind(this.element, 'scroll', function (e) { return this$1.onScroll(e); });
12241236
updateGeometry(this);
@@ -1270,7 +1282,7 @@ PerfectScrollbar.prototype.onScroll = function onScroll (e) {
12701282
this.element.scrollLeft - this.lastScrollLeft
12711283
);
12721284

1273-
this.lastScrollTop = this.element.scrollTop;
1285+
this.lastScrollTop = Math.floor(this.element.scrollTop);
12741286
this.lastScrollLeft = this.element.scrollLeft;
12751287
};
12761288

‎dist/perfect-scrollbar.esm.js

+28-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*!
2-
* perfect-scrollbar v1.3.0
3-
* (c) 2017 Hyunje Jun
2+
* perfect-scrollbar v1.4.0
3+
* (c) 2018 Hyunje Jun
44
* @license MIT
55
*/
66
function get(element) {
@@ -28,6 +28,7 @@ var elMatches =
2828
typeof Element !== 'undefined' &&
2929
(Element.prototype.matches ||
3030
Element.prototype.webkitMatchesSelector ||
31+
Element.prototype.mozMatchesSelector ||
3132
Element.prototype.msMatchesSelector);
3233

3334
function matches(element, query) {
@@ -62,6 +63,7 @@ var cls = {
6263
},
6364
state: {
6465
focus: 'ps--focus',
66+
clicking: 'ps--clicking',
6567
active: function (x) { return ("ps--active-" + x); },
6668
scrolling: function (x) { return ("ps--scrolling-" + x); },
6769
},
@@ -316,6 +318,7 @@ var env = {
316318

317319
var updateGeometry = function(i) {
318320
var element = i.element;
321+
var roundedScrollTop = Math.floor(element.scrollTop);
319322

320323
i.containerWidth = element.clientWidth;
321324
i.containerHeight = element.clientHeight;
@@ -367,7 +370,7 @@ var updateGeometry = function(i) {
367370
toInt(i.railYHeight * i.containerHeight / i.contentHeight)
368371
);
369372
i.scrollbarYTop = toInt(
370-
element.scrollTop *
373+
roundedScrollTop *
371374
(i.railYHeight - i.scrollbarYHeight) /
372375
(i.contentHeight - i.containerHeight)
373376
);
@@ -414,6 +417,8 @@ function getThumbSize(i, thumbSize) {
414417

415418
function updateCss(element, i) {
416419
var xRailOffset = { width: i.railXWidth };
420+
var roundedScrollTop = Math.floor(element.scrollTop);
421+
417422
if (i.isRtl) {
418423
xRailOffset.left =
419424
i.negativeScrollAdjustment +
@@ -424,13 +429,13 @@ function updateCss(element, i) {
424429
xRailOffset.left = element.scrollLeft;
425430
}
426431
if (i.isScrollbarXUsingBottom) {
427-
xRailOffset.bottom = i.scrollbarXBottom - element.scrollTop;
432+
xRailOffset.bottom = i.scrollbarXBottom - roundedScrollTop;
428433
} else {
429-
xRailOffset.top = i.scrollbarXTop + element.scrollTop;
434+
xRailOffset.top = i.scrollbarXTop + roundedScrollTop;
430435
}
431436
set(i.scrollbarXRail, xRailOffset);
432437

433-
var yRailOffset = { top: element.scrollTop, height: i.railYHeight };
438+
var yRailOffset = { top: roundedScrollTop, height: i.railYHeight };
434439
if (i.isScrollbarYUsingRight) {
435440
if (i.isRtl) {
436441
yRailOffset.right =
@@ -505,7 +510,8 @@ var dragThumb = function(i) {
505510
'scrollbarX',
506511
'scrollbarXWidth',
507512
'scrollLeft',
508-
'x' ]);
513+
'x',
514+
'scrollbarXRail' ]);
509515
bindMouseScrollHandler(i, [
510516
'containerHeight',
511517
'contentHeight',
@@ -514,7 +520,8 @@ var dragThumb = function(i) {
514520
'scrollbarY',
515521
'scrollbarYHeight',
516522
'scrollTop',
517-
'y' ]);
523+
'y',
524+
'scrollbarYRail' ]);
518525
};
519526

520527
function bindMouseScrollHandler(
@@ -529,6 +536,7 @@ function bindMouseScrollHandler(
529536
var scrollbarYHeight = ref[5];
530537
var scrollTop = ref[6];
531538
var y = ref[7];
539+
var scrollbarYRail = ref[8];
532540

533541
var element = i.element;
534542

@@ -548,6 +556,7 @@ function bindMouseScrollHandler(
548556

549557
function mouseUpHandler() {
550558
removeScrollingClass(i, y);
559+
i[scrollbarYRail].classList.remove(cls.state.clicking);
551560
i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
552561
}
553562

@@ -561,6 +570,8 @@ function bindMouseScrollHandler(
561570
i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
562571
i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
563572

573+
i[scrollbarYRail].classList.add(cls.state.clicking);
574+
564575
e.stopPropagation();
565576
e.preventDefault();
566577
});
@@ -573,7 +584,7 @@ var keyboard = function(i) {
573584
var scrollbarFocused = function () { return matches(i.scrollbarX, ':focus') || matches(i.scrollbarY, ':focus'); };
574585

575586
function shouldPreventDefault(deltaX, deltaY) {
576-
var scrollTop = element.scrollTop;
587+
var scrollTop = Math.floor(element.scrollTop);
577588
if (deltaX === 0) {
578589
if (!i.scrollbarYActive) {
579590
return false;
@@ -714,12 +725,13 @@ var wheel = function(i) {
714725
var element = i.element;
715726

716727
function shouldPreventDefault(deltaX, deltaY) {
728+
var roundedScrollTop = Math.floor(element.scrollTop);
717729
var isTop = element.scrollTop === 0;
718730
var isBottom =
719-
element.scrollTop + element.offsetHeight === element.scrollHeight;
731+
roundedScrollTop + element.offsetHeight === element.scrollHeight;
720732
var isLeft = element.scrollLeft === 0;
721733
var isRight =
722-
element.scrollLeft + element.offsetWidth === element.offsetWidth;
734+
element.scrollLeft + element.offsetWidth === element.scrollWidth;
723735

724736
var hitsBound;
725737

@@ -795,7 +807,7 @@ var wheel = function(i) {
795807
return true;
796808
}
797809
}
798-
var maxScrollLeft = cursor.scrollLeft - cursor.clientWidth;
810+
var maxScrollLeft = cursor.scrollWidth - cursor.clientWidth;
799811
if (maxScrollLeft > 0) {
800812
if (
801813
!(cursor.scrollLeft === 0 && deltaX < 0) &&
@@ -871,7 +883,7 @@ var touch = function(i) {
871883
var element = i.element;
872884

873885
function shouldPrevent(deltaX, deltaY) {
874-
var scrollTop = element.scrollTop;
886+
var scrollTop = Math.floor(element.scrollTop);
875887
var scrollLeft = element.scrollLeft;
876888
var magnitudeX = Math.abs(deltaX);
877889
var magnitudeY = Math.abs(deltaY);
@@ -1085,7 +1097,7 @@ var defaultSettings = function () { return ({
10851097
suppressScrollY: false,
10861098
swipeEasing: true,
10871099
useBothWheelAxes: false,
1088-
wheelPropagation: false,
1100+
wheelPropagation: true,
10891101
wheelSpeed: 1,
10901102
}); };
10911103

@@ -1216,7 +1228,7 @@ var PerfectScrollbar = function PerfectScrollbar(element, userSettings) {
12161228

12171229
this.settings.handlers.forEach(function (handlerName) { return handlers[handlerName](this$1); });
12181230

1219-
this.lastScrollTop = element.scrollTop; // for onScroll only
1231+
this.lastScrollTop = Math.floor(element.scrollTop); // for onScroll only
12201232
this.lastScrollLeft = element.scrollLeft; // for onScroll only
12211233
this.event.bind(this.element, 'scroll', function (e) { return this$1.onScroll(e); });
12221234
updateGeometry(this);
@@ -1268,7 +1280,7 @@ PerfectScrollbar.prototype.onScroll = function onScroll (e) {
12681280
this.element.scrollLeft - this.lastScrollLeft
12691281
);
12701282

1271-
this.lastScrollTop = this.element.scrollTop;
1283+
this.lastScrollTop = Math.floor(this.element.scrollTop);
12721284
this.lastScrollLeft = this.element.scrollLeft;
12731285
};
12741286

0 commit comments

Comments
 (0)