【发布时间】：2020-11-20 11:43:58
【问题描述】：
我正在尝试拥有一个永久抽屉（不在顶部应用栏下方）和网站的可滚动部分，顶部有一个标准顶部应用栏，例如 this demo。
一切正常，直到我开始滚动页面，顶部应用栏根本不动，这与我期望它基于演示所做的不同。
（我在没有本地托管任何内容的情况下执行所有这些操作，因此它应该可以在没有任何本地文件的情况下工作。）
这是我的代码，经过简化并在一个 html 文件中：
<!DOCTYPE html>
<html lang="en">
<head>
<title style="display: none">Page Title</title>
<link rel="shortcut icon" href="http://triarc.hu/src/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet">
<style type="text/css">
body {
margin:0;
}
html, body {height: 100vh; overflow: hidden;}
.drawer-frame-root {
display: -ms-flexbox;
display: flex;
height: 100vh;
}
.drawer-app-content {
-ms-flex: auto;
flex: auto;
overflow: auto;
}
.drawer-main-content {
overflow: auto;
height: 100%;
padding: 0 18px;
}
.drawer-top-app-bar {
position: absolute;
}
.drawer-frame-app-content {
position: relative;
width: 100%;
}
</style>
</head>
<body class="mdc-typography">
<div id="root">
<div class="drawer-frame-root">
<aside class="mdc-drawer">
<div class="mdc-drawer__content scrollbox">
<nav class="mdc-list">
<a class="mdc-list-item" href="#1">
<span class="mdc-list-item__ripple"></span>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">contact_page</i>
<span class="mdc-list-item__text">Contact</span>
</a>
<a class="mdc-list-item" href="#2">
<span class="mdc-list-item__ripple"></span>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">people</i>
<span class="mdc-list-item__text">Our Team</span>
</a>
</nav>
</div>
</aside>
<div class="drawer-frame-app-content">
<header class="mdc-top-app-bar drawer-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<span class="mdc-top-app-bar__title">Top app bar</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Search">search</button>
</section>
</div>
</header>
<div class="drawer-main-content">
<div class="mdc-top-app-bar--fixed-adjust">
This<br> is<br> a<br> long<br> text<br> that<br> will<br> take<br> up<br> multiple<br> lines<br> and<br> hopefully<br> let<br> you<br> scroll<br> the<br> page<br> without<br> having<br> to<br> resize<br> the<br> window.<br> If<br> it<br> isn't<br> long<br> enough<br> for<br> you,<br> just<br> make<br> your<br> window<br> smaller<br> or<br> open<br> devtools<br> and<br> turn<br> on<br> the<br> device<br> toolbar.
</div>
</div>
</div>
</div>
</div>
</body>
<script>
const topAppBarElement = document.querySelector('.mdc-top-app-bar');
topAppBar = new mdc.topAppBar.MDCTopAppBar(topAppBarElement);
</script>
</html>我做错了什么，或者我错过了什么？
我想出的其他一些东西可能会有所帮助：如果我在演示中打开 chrome devtools，而不是删除并重新插入 mdc-top-app-bar 或抽屉主内容组件，它就会像我的一样开始工作.
【问题讨论】：
标签： html css mdc-components