diff --git a/src/css/main.scss b/src/css/main.scss index bad2da6..e4de879 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -96,7 +96,7 @@ $ps-bar-hover: #999; } } - &:hover { + &:hover, &.ps-focus { @include in-scrolling; >.ps-scrollbar-x-rail, diff --git a/src/js/plugin/handler/keyboard.js b/src/js/plugin/handler/keyboard.js index 3fc8155..bc459e8 100644 --- a/src/js/plugin/handler/keyboard.js +++ b/src/js/plugin/handler/keyboard.js @@ -4,6 +4,7 @@ 'use strict'; var h = require('../../lib/helper') + , d = require('../../lib/dom') , instances = require('../instances') , updateGeometry = require('../update-geometry') , updateScroll = require('../update-scroll'); @@ -46,7 +47,10 @@ function bindKeyboardHandler(element, i) { return; } - if (!hovered) { + var focused = d.matches(i.scrollbarX, ':focus') || + d.matches(i.scrollbarY, ':focus'); + + if (!hovered && !focused) { return; } diff --git a/src/js/plugin/instances.js b/src/js/plugin/instances.js index 0236097..e3738ab 100644 --- a/src/js/plugin/instances.js +++ b/src/js/plugin/instances.js @@ -3,7 +3,8 @@ */ 'use strict'; -var d = require('../lib/dom') +var cls = require('../lib/class') + , d = require('../lib/dom') , defaultSettings = require('./default-setting') , EventManager = require('../lib/event-manager') , guid = require('../lib/guid') @@ -33,9 +34,19 @@ function Instance(element) { i.event = new EventManager(); i.ownerDocument = element.ownerDocument || document; + function focus() { + cls.add(element, 'ps-focus'); + } + + function blur() { + cls.remove(element, 'ps-focus'); + } + 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.event.bind(i.scrollbarX, 'focus', focus); + i.event.bind(i.scrollbarX, 'blur', blur); i.scrollbarXActive = null; i.scrollbarXWidth = null; i.scrollbarXLeft = null; @@ -53,6 +64,8 @@ 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.event.bind(i.scrollbarY, 'focus', focus); + i.event.bind(i.scrollbarY, 'blur', blur); i.scrollbarYActive = null; i.scrollbarYHeight = null; i.scrollbarYTop = null;