From 13f617c30b1be0e0c9b1b290b381e5b34edfb88c Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 24 Mar 2022 10:32:41 +0100 Subject: [PATCH] 0.6.8 --- package.json | 5 +++-- src/js/plugin/handler/click-rail.js | 4 ++-- src/js/plugin/handler/drag-scrollbar.js | 4 ++-- src/js/plugin/handler/mouse-wheel.js | 10 +--------- src/js/plugin/instances.js | 2 ++ src/js/plugin/update-geometry.js | 24 ++++++++++++++++-------- src/js/plugin/update-scroll.js | 4 ++-- src/js/plugin/update.js | 7 ++++++- 8 files changed, 34 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 4902013..8f078f9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "perfect-scrollbar", - "version": "0.6.7", + "version": "0.6.8", "description": "Minimalistic but perfect custom scrollbar plugin", "author": "Hyunje Alex Jun ", "contributors": [ @@ -43,7 +43,8 @@ }, "scripts": { "test": "gulp", - "before-deploy": "gulp && gulp compress" + "before-deploy": "gulp && gulp compress", + "release": "rm -rf dist && gulp && npm publish" }, "license": "MIT" } diff --git a/src/js/plugin/handler/click-rail.js b/src/js/plugin/handler/click-rail.js index c08ba05..18692e3 100644 --- a/src/js/plugin/handler/click-rail.js +++ b/src/js/plugin/handler/click-rail.js @@ -19,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; @@ -40,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; diff --git a/src/js/plugin/handler/drag-scrollbar.js b/src/js/plugin/handler/drag-scrollbar.js index 060b30a..13d7eff 100644 --- a/src/js/plugin/handler/drag-scrollbar.js +++ b/src/js/plugin/handler/drag-scrollbar.js @@ -15,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; @@ -60,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; diff --git a/src/js/plugin/handler/mouse-wheel.js b/src/js/plugin/handler/mouse-wheel.js index 5b85089..d298178 100644 --- a/src/js/plugin/handler/mouse-wheel.js +++ b/src/js/plugin/handler/mouse-wheel.js @@ -3,8 +3,7 @@ */ 'use strict'; -var h = require('../../lib/helper') - , instances = require('../instances') +var instances = require('../instances') , updateGeometry = require('../update-geometry') , updateScroll = require('../update-scroll'); @@ -81,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]; diff --git a/src/js/plugin/instances.js b/src/js/plugin/instances.js index 7ab4270..0236097 100644 --- 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; diff --git a/src/js/plugin/update-geometry.js b/src/js/plugin/update-geometry.js index 8dce8d7..7ae4179 100644 --- a/src/js/plugin/update-geometry.js +++ b/src/js/plugin/update-geometry.js @@ -89,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) { @@ -102,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; - updateScroll(element, 'top', 0); } if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) { @@ -116,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); + } }; diff --git a/src/js/plugin/update-scroll.js b/src/js/plugin/update-scroll.js index ff41ae4..3eab8e8 100644 --- a/src/js/plugin/update-scroll.js +++ b/src/js/plugin/update-scroll.js @@ -56,13 +56,13 @@ module.exports = function (element, axis, value) { var i = instances.get(element); - if (axis === 'top' && value > i.contentHeight - i.containerHeight) { + 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) { + if (axis === 'left' && value >= i.contentWidth - i.containerWidth) { element.scrollLeft = i.contentWidth - i.containerWidth; element.dispatchEvent(xEndEvent); return; // don't allow scroll past container diff --git a/src/js/plugin/update.js b/src/js/plugin/update.js index 6d0edfd..3c539ac 100644 --- 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', ''); };