如何在页面的父组件（主组件）不显示滚动的情况下放大页面

Question

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

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

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

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%',
}

});

是不是我忘记设置了什么？如果可以的话请帮我ui解决这个问题。

Answer 1

关于如何隐藏滚动条但保留 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 class（或您的 .css 文件中的 html 或 body）以隐藏滚动条用户放大时的根元素或页面。

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

进行设置

这是一个快速 fiddle 我做了一些关于如何在页面级别隐藏滚动条但在边栏和内容元素中显示它的选项：https://jsfiddle.net/bethylogism/b6nuehqg/246/

如果这不是您想要的，请快速制作一个 JS Fiddle 或 CodePen 来描述您正在努力使用的功能。诊断和帮助您会更容易。例如。我不是 100% 确定“window 应用程序”是什么意思。

Answer 2

幸运的是，我解决了这个问题，我将在这里分享。

正如我所说，我希望我的页面不滚动，但其中的组件应该滚动 zooming-in。当我将主页的宽度和高度设置为 100vw 和 100vh 时，我可以给其中组件的宽度和高度以百分比来适应它们在页面中。下面的代码是主页的css。

我想构建一个看起来像 window 应用程序的页面。这有一个问题，当我 zoom-in 页面时，它将在主页上显示 scroll-bar。我将主页（parent）的参数设置如下。宽度：100vw，高度：100vh

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

首页第一个css代码(parent)。我使用 Material-ui 进行样式设置。 root 是主页的类名。 header、面包屑和内容是我的 children 组件的类名。

const useStyles = makeStyles({

根：{

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

},

header：{

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",

},

});

Answer 3

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

在您的页面（或更高层的容器组件）中为您的根设置样式：

高度：“100vh”-> 这将填满整个屏幕。

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

以所有高度中的一些为 100% 的方式

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

高度：'100%' -> 适合页面大小

如何在页面的父组件（主组件）不显示滚动的情况下放大页面

how to zoom in a page without displaying scroll in the parent component(main component) of the page

css

scrollbar

flexbox

reactjs

material-ui