如何放大页面而不在页面的父组件（主组件）中显示滚动

Posted 2023-04-14

【中文标题】如何放大页面而不在页面的父组件（主组件）中显示滚动

【英文标题】：how to zoom in a page without displaying scroll in the parent component(main component) of the page

【发布时间】：2021-05-23 09:46:21

【问题描述】：

我想构建一个看起来像窗口应用程序的页面。有一个问题，当我放大页面时，它会在主页上显示一个滚动条。 我将主页（父）的参数设置如下。 宽度：100vw， 高度：100vh

我应该怎么做才能滚动浏览主页内的组件（子组件）而不是主页（父组件）。 我把我的代码的 css 部分放在下面。

主页（父）的第一个 css 代码。我使用 Material-ui 进行样式设置。 root 是主页的类名。 header、breadCrumb 和 content 是我的子组件的 className。

const useStyles = makeStyles(

root: 
    width:'100vw',
    height: '100vh',
,

header: 
    height: '10%',
,

breadCrumb: 
    height: '10%',
,

content: 
    height: '80%',

);

内容组件也有自己的子项（侧边栏和内容），我将它们的 css 属性放在下面。

const useStyles = makeStyles(

root: 
    border: '1px solid blue', 
    display: 'flex',
    width:'auto',
    height: 'auto',
,

sidebar: 
    backgroundColor: 'orange',
    width: '20%',

    height: 'auto',
    border: '1px solid red',
    overflow: 'scroll'
,

content: 
    height: 'auto',
    width: '80%',

);

有什么我忘记设置的吗？如果可以的话，请指导我解决这个问题。

【参考方案1】：

一般来说，你应该做这些项目...

在您的页面（或更高的容器组件）中设置您的根目录：

height:"100vh" -> 这将填满整个屏幕。

再次在该容器中，为您的子组件设置样式：

所有高度中的一些是 100%

最后，在每个子组件中，高度必须为：

height: '100%' -> 适合页面

【参考方案2】：

有关如何隐藏滚动条但保留 w3schools 的滚动功能的此页面可能会有所帮助： https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

 /* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar 
  display: none;


/* Hide scrollbar for IE, Edge and Firefox */
.example 
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
 

您可以将此应用到您的 .root 类（或 .css 文件中的 html 或 body）以在用户放大时隐藏根元素或页面上的滚动条。

如果你只想要例如要滚动的内容元素或侧边栏元素，您需要设置它们的高度。 auto 将调整高度以适应内容。尝试使用px 或vh 进行设置。

这里是我用一些选项制作的快速小提琴，用于如何在页面级别隐藏滚动条，但在侧边栏和内容元素中显示它：https://jsfiddle.net/bethylogism/b6nuehqg/246/

如果这不是您所了解的，请制作一个快速的 JS Fiddle 或 CodePen 您正在苦苦挣扎的功能。这将更容易诊断和帮助您。例如。我不是 100% 确定您所说的“窗口应用程序”是什么意思。

【讨论】：

感谢您的回答，但它对我不起作用。好消息是我可以解决它并把它放在这里。

【参考方案3】：

还好我解决了问题，我准备在这里分享一下。

正如我所说，我希望我的页面不被滚动，但它里面的组件应该通过放大来滚动。当我将主页的宽度和高度设置为 100vw 和 100vh 时，我可以用百分比给出其中组件的宽度和高度以使其适合页面。下面的代码是主页面的css。

我想构建一个看起来像窗口应用程序的页面。有一个问题，当我放大页面时，它会在主页上显示一个滚动条。我将主页（父）的参数设置如下。宽度：100vw，高度：100vh

我应该怎么做才能滚动浏览主页内的组件（子组件）而不是主页（父组件）。我把我的代码的 css 部分放在下面。

主页（父）的第一个 css 代码。我使用 Material-ui 进行样式设置。 root 是主页的类名。 header、breadCrumb 和 content 是我的子组件的 className。

const useStyles = makeStyles(

根：

width:"100vw",
height:"100vh",

,

标题：

height: "10%",
width: "100%",

,

面包屑：

height: "10%",
width: "100%",

,

内容：

height: "80%",
width: "100%"

, );

内容组件的css代码由两个组件（侧边栏和内容）组成。

const useStyles = makeStyles(

根：

display: "flex",
width:"100%",
height:"100%",

,

侧边栏：

width: "20%",
height: "100%",
overflow: "auto",

,

内容：

width: "80%",
height: "100%",
overflow: "auto",

,

);