From 17fedcab2ad6cb620909067f9e483e37cd387a0f Mon Sep 17 00:00:00 2001
From: ciaochaos <1272777550@qq.com>
Date: Mon, 22 Jun 2020 18:03:46 +0800
Subject: [PATCH] =?UTF-8?q?[fix]=20=E4=BF=AE=E5=A4=8D=E6=A1=8C=E9=9D=A2?=
 =?UTF-8?q?=E7=AB=AF=E5=B7=A6=E5=8F=B3=E6=BB=91=E5=8A=A8=EF=BC=88vw=20?=
 =?UTF-8?q?=E5=8C=85=E6=8B=AC=E6=BB=9A=E5=8A=A8=E6=9D=A1=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Qrcode.css |  2 +-
 src/components/app/App.js |  2 ++
 src/utils/util.js         | 26 ++++++++++++++++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

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