javascript - 带有水平滚动的固定标题

Question

我正在开发一个渐进式网络应用程序，用户可以在其中创建可以水平扩展的代码块(取决于内容的大小)，而且，我有一个固定的顶部应用程序栏，但是，当页面内容在 x 轴溢出页面，顶部应用栏选项被推到 Canvas 的不可见一侧

实时网络应用程序:https://ide.code101.com.br

/* Prevent user from clicking on page elements before loading */
html {pointer-events: none}

a,
a:hover,
a:focus {text-decoration: none}

#editArea, #codeOutput {padding: 10px}

#editArea, .sortable {
  list-style-type: none;
  font-size: 18px;
}

#editArea *:not(.material-icons) {clear: both}

/* FIX SIZE ISSUES WITH MDC TEXTFIELD ON DIALOG (OUTLINED) */

.mdc-dialog .mdc-text-field {width: 100%}
.mdc-dialog .mdc-text-field--outlined::before,
.mdc-dialog .mdc-text-field--outlined::after {
  width: 0 !important;
  height: 0 !important;
}

/* ############################## */

.mdc-top-app-bar, .mdc-drawer, .mdc-dialog {user-select: none}

.mdc-top-app-bar--fixed-adjust {height: 100vh}

.list {min-height: 44.5px}

.codeide-logo {font-family: "Press Start 2P"}

.scrollDiv {
  position: fixed;
  width: 100%;
  padding: 20px;
  bottom: 0;
  z-index: -1;
}

/* BLOCKS COLOR HIGHLIGHT (MONOKAI)
#272822 - BLACK
#F92672 - RED
#66D9EF - BLUE
#A6E22E - GREEN
#FD971F - ORANGE
-----------------------------*/

.commandBlock {
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  padding: 8px 16px !important;
  margin-bottom: 16px !important;
  border-radius: 4px;
  float: left !important;
}

.code {display: none}

.drag {
  float: left !important;
  margin-right: 16px !important;
}

.close {
  float: right !important;
  margin-left: 16px !important;
}

.editable {
  white-space: nowrap;
  background-color: #FD971F;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  padding: 4px 8px !important;
  border-radius: 4px;
}

.cmd_alert {background-color: #66D9EF}

.cmd_if, .cmd_else, .cmd_for {background-color: #A6E22E}

.cmd_comment {background-color: #BDC3C7}

/* ########## CODE BLOCKS ########## */

body.dragging, body.dragging * {cursor: move !important}

.dragged {
  opacity: 0.5;
  overflow: hidden;
}

ul.list {
  padding-left: 0;
  margin: 0 0 9px 0;
  min-height: 10px;
}

ul.list li {
  color: white;
  display: block;
  margin: 5px 0;
  padding: 5px;
  user-select: none;
  box-sizing: content-box;
}

ul.list li.placeholder {
  position: relative;
  margin: 0;
  padding: 0;
  border-color: red;
  border-style: dotted;
  z-index: 2000;
}

ul.list li.placeholder:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: -8px;
  left: -8px;
  top: -1px;
  border: 8px solid transparent;
  border-left-color: red;
  border-right: none;
  z-index: 2000;
}

   <!-- TOP APP BAR -->
    <header class="mdc-top-app-bar mdc-top-app-bar--fixed w3-card">
    	<div class="mdc-top-app-bar__row">
    
    		<!-- CONTENT AT LEFT -->
    		<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
    
    			<!-- DRAWER BUTTON -->
    			<a id="drawerBtn" onclick="drawer.open = true" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
    
    			<!-- APP TITLE -->
    			<span class="mdc-top-app-bar__title codeide-logo">codeIDE</span>
    
    		</section>
    
    		<!-- CONTENT AT RIGHT -->
    		<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
    
    			<!-- CHANGE VIEW MODE -->
    			<button class="mdc-icon-button material-icons" id="btnChangeView" onclick="changeViewMode()">code</button>
    
    			<!-- SIDE MENU -->
    			<div class="mdc-menu-surface--anchor">
    				<a onclick="menu.open = !menu.open" class="material-icons mdc-top-app-bar__action-item" aria-label="Opções" alt="Opções">more_vert</a>
    				<div class="mdc-menu mdc-menu-surface" tabindex="-1">
    					<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
    
    						<!-- EXPORT FILE -->
    						<li onclick="exportFile($('#editArea').html())" class="mdc-list-item" role="menuitem">
    							<i class="mdc-list-item__graphic material-icons">save</i>
    							<span class="mdc-list-item__text">Exportar arquivo</span>
    						</li>
    
    						<!-- IMPORT FILE -->
    						<li onclick="importFile()" class="mdc-list-item" role="menuitem">
    							<i class="mdc-list-item__graphic material-icons">folder_open</i>
    							<span class="mdc-list-item__text">Importar arquivo</span>
    						</li>
    
    						<li class="mdc-list-divider" role="separator"></li>
    
    						<!-- NIGHT MODE -->
    						<li id="nightModeBtn" onclick="nightMode('trigger')" class="mdc-list-item" role="menuitem">
    							<i class="mdc-list-item__graphic material-icons">brightness_2</i>
    							<span class="mdc-list-item__text">Modo noturno</span>
    						</li>
    
    						<!-- ABOUT -->
    						<li onclick="displayAboutDialog()" class="mdc-list-item" role="menuitem">
    							<i class="mdc-list-item__graphic material-icons">info</i>
    							<span class="mdc-list-item__text">Sobre</span>
    						</li>
    
    						<li class="mdc-list-divider" role="separator"></li>
    
    						<!-- CODE101 -->
    						<li onclick="location.href='https://code101.com.br'" class="mdc-list-item" role="menuitem">
    							<i class="mdc-list-item__graphic material-icons">launch</i>
    							<span class="mdc-list-item__text">Visitar o code101</span>
    						</li>
    
    					</ul>
    				</div>
    			</div>
    		</section>
    	</div>
    </header>

Answer 1

我解决了!

通过从 body 中删除 overflow: scroll css 属性，并将其传递给代码块列表元素 (#list)