From d4bb6e8676ce79271e2f1996fe750d7d9ddfe75a Mon Sep 17 00:00:00 2001 From: Eirik Backer Date: Fri, 10 Aug 2018 13:04:50 +0200 Subject: [PATCH] Fix for OSX auto hiding scrollbars (#103) * Fix for OSX auto hiding scrollbars * Move fallback scrollbar size to const --- packages/core-scroll/core-scroll.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/core-scroll/core-scroll.js b/packages/core-scroll/core-scroll.js index 5877938b..ad6302b3 100644 --- a/packages/core-scroll/core-scroll.js +++ b/packages/core-scroll/core-scroll.js @@ -6,6 +6,7 @@ const ATTR = 'data-core-scroll' const UUID = `data-${name}-${version}`.replace(/\W+/g, '-') // Strip invalid attribute characters const MOVE = {up: {y: -1, prop: 'top'}, down: {y: 1, prop: 'bottom'}, left: {x: -1}, right: {x: 1}} const SIGNIFICANT_DRAG_THRESHOLD = 10 +const FALLBACK_SCROLLBAR_SIZE = 18 const FRICTION = 0.8 const VELOCITY = 20 @@ -23,9 +24,12 @@ export default function scroll (elements, move = '') { target.style.willChange = 'scroll-position' // Enhance performace target.style.webkitOverflowScrolling = 'touch' // Momentum scoll on iOS - // Must be after setting overflow scroll - const scrollbarWidth = target.offsetWidth - target.clientWidth + 1 // Plus one fixes safari pixelbug - const scrollbarHeight = target.offsetHeight - target.clientHeight + 1 // Plus one fixes safari pixelbug + // Calculate scrollBareSizes for hiding + // Must be after setting overflow:scroll + // Default to 18px (max reports scrollbar size 0 when "auto hiding") + // Plus one fixes safari pixelbug + const scrollbarWidth = (target.offsetWidth - target.clientWidth || FALLBACK_SCROLLBAR_SIZE) + 1 + const scrollbarHeight = (target.offsetHeight - target.clientHeight || FALLBACK_SCROLLBAR_SIZE) + 1 target.style.maxHeight = `calc(100% + ${scrollbarHeight}px)` // Consistent height target.style.marginRight = `-${scrollbarWidth}px`