diff --git a/src/components/picker.js b/src/components/picker.js index 3feb0db..efdba6a 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -2,12 +2,11 @@ import '../vendor/raf-polyfill' import React from 'react' import PropTypes from 'prop-types' -import measureScrollbar from 'measure-scrollbar' import data from '../data' import store from '../utils/store' import frequently from '../utils/frequently' -import { deepMerge } from '../utils' +import { deepMerge, measureScrollbar } from '../utils' import { Anchors, Category, Emoji, Preview, Search } from '.' diff --git a/src/utils/index.js b/src/utils/index.js index 462a067..342fdee 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -163,11 +163,29 @@ function deepMerge(a, b) { return o } +// https://github.com/sonicdoe/measure-scrollbar +function measureScrollbar() { + const div = document.createElement('div') + + div.style.width = '100px' + div.style.height = '100px' + div.style.overflow = 'scroll' + div.style.position = 'absolute' + div.style.top = '-9999px' + + document.body.appendChild(div) + const scrollbarWidth = div.offsetWidth - div.clientWidth + document.body.removeChild(div) + + return scrollbarWidth +} + export { getData, getSanitizedData, uniq, intersect, deepMerge, - unifiedToNative + unifiedToNative, + measureScrollbar } diff --git a/yarn.lock b/yarn.lock index 977d1ef..16fbd6f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3879,10 +3879,6 @@ md5.js@^1.3.4: hash-base "^3.0.0" inherits "^2.0.1" -measure-scrollbar@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/measure-scrollbar/-/measure-scrollbar-1.0.0.tgz#a7b1019155671192c1a8587ea49669af4f75833d" - media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"