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

This commit is contained in:
ciaochaos 2020-06-22 18:03:46 +08:00
parent 6d6f8fd842
commit 17fedcab2a
3 changed files with 29 additions and 1 deletions

View File

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

View File

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

View File

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