我似乎無法溢出：“隱藏”工作

Question

我試圖通過隱藏溢出來禁用超出顯示器分辨率的滾動。 我不確定為什么它不起作用。

App.js 文件：

function App() {
  return (
    <BrowserRouter>
    <div className="App"
    style={{
      overflow:"hidden"
      }}
    >
    <Route
        exact
        path="/"
        component={DefaultView}

    ></Route>
    </div>
    </BrowserRouter>
  );
}

默認視圖文件：

render(){
        return(
            <div
                style={{
                    overflow:"hidden"
                }}>
                <div
                    className="bg"
                    style={{
                        backgroundColor:"#FFFFF",
                        position:"absolute",
                        width:"100%",
                        height:"100%"
                        }}
                />
                <div 
                    className="line"
                    style={{
                        backgroundColor:"#289BD3",
                        position:"absolute",
                        height:"1000px",
                        width:"1920px",
                        transform:"rotate(45deg)",
                        top:"200px",
                        left:"-800px"
                    }}
                >
                </div>
            </div>
        )
    }

現在，沒有 X 滾動，但我可以上下滾動。

問題的代碼箱： https ://codesandbox.io/s/rylyo4zy24

謝謝你的幫助！

Answer 1

我不確定您到底要在這里完成什么，但是對於溢出隱藏具有任何意義，您需要為相應的元素定義一些高度和/或寬度：

<div
  style={{
    overflow:"hidden",
    height:"1000px",
    width:"1920px"
  }}
>
...

Answer 2

我將父 div 的位置更改為絕對位置，將子 div 的位置更改為相對位置，從而解決了問題。