diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css index 02ffd89..dbac00e 100644 --- a/src/components/Qrcode.css +++ b/src/components/Qrcode.css @@ -65,7 +65,7 @@ overflow-x: scroll; overflow-y: hidden; overflow-scrolling: touch; - width: 100vw; + width: calc(100vw - var(--scrollbar-width)); white-space: nowrap; display: flex; margin-bottom: calc((-10px - 2vmin)/2); diff --git a/src/components/app/App.js b/src/components/app/App.js index a979a60..43d94e9 100644 --- a/src/components/app/App.js +++ b/src/components/app/App.js @@ -11,10 +11,12 @@ import {getDownloadCount, login} from "../../api/db"; import {connect} from 'react-redux'; import {loadDownloadData} from "../../actions"; import ReactGA from 'react-ga'; +import {setScrollbarWidthProp} from "../../utils/util" ReactGA.initialize('UA-165845289-1'); function App({ dispatch }) { const updateDownloadData = useCallback((downloadData) => dispatch(loadDownloadData(downloadData)), []); + setScrollbarWidthProp() useEffect(() => { login().then(() => { diff --git a/src/utils/util.js b/src/utils/util.js index e2f1003..b2ef7da 100644 --- a/src/utils/util.js +++ b/src/utils/util.js @@ -39,3 +39,29 @@ export function extend(target, options) { return target } +function getScrollbarWidth() { + + // Creating invisible container + const outer = document.createElement('div'); + outer.style.visibility = 'hidden'; + outer.style.overflow = 'scroll'; // forcing scrollbar to appear + outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps + document.body.appendChild(outer); + + // Creating inner element and placing it in the container + const inner = document.createElement('div'); + outer.appendChild(inner); + + // Calculating difference between container's full width and the child width + const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth); + + // Removing temporary elements from the DOM + outer.parentNode.removeChild(outer); + + return scrollbarWidth; + +} + +export function setScrollbarWidthProp() { + document.documentElement.style.setProperty('--scrollbar-width', getScrollbarWidth() + "px"); +} \ No newline at end of file