[fix] 修复桌面端左右滑动（vw 包括滚动条宽度）

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);

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(() => {

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");
+}