如何使用相互堆叠的 HTML 元素实现组件的滚动答案

【问题标题】：How to implement scrolling on component with HTML elements that are stacked on each other如何使用相互堆叠的 HTML 元素实现组件的滚动
【发布时间】：2021-09-04 17:41:18
【问题描述】：

我正在开发一个 Angular 应用程序，旨在提供一些基本的图层操作：添加和定位图层、缩放、旋转等。

例如，在下图中添加了 3 个图层，背景和两个具有透明度的图层，它们已使用带有 position: absolute 的 div 进行定位

正如您所看到的，当任何层大于可用高度或宽度时，就会产生滚动条。

我需要带有绿色边框的组件中的那些滚动条（垂直和水平）。以某种方式，任何尺寸的图像都将显示在绿色组件 (divLayers) 内，包括位置非常宽或位于底部的小图像。

我查看了很多关于这方面的教程，但它们都使用了在具有滚动条的组件内相对位置的项目。

我找到了一些接近我需要的东西，但不知道如何应用它。 https://www.bennadel.com/blog/3409-using-position-absolute-inside-a-scrolling-overflow-container.htm

这里是相关的 HTML 和 CSS 文件

app.component.html

<div class="divMain">
    <app-tool-bar class="divToolBar"></app-tool-bar>
    <app-layer-presenter class="divLayerPresenter"></app-layer-presenter >
</div>

layer-presenter.html

<div class="divLayers">
    <div *ngFor="let il of getLayers()">
        <img class="divFloatLayer" 
            [src]="il.img_src" 
            [style.left]="il.getLeftPx()"
            [style.top]="il.getTopPx()"
            [style.z-index]="il.getZindex()"
            [style.transform]="il.getTransform()"
        />
    </div>
</div>
<app-layer-list class="divLayerList"></app-layer-list>

layer-presenter.css

.divLayers {
  width: 95%;
  flex-basis: 95%;
  border: 3px solid green; /*debug */
} 

.divLayerList {
  flex :1 ;
  border: 3px solid blue; /*debug */
}

.divFloatLayer {
    position: absolute;
    transform-origin: left top ;
    /*border: solid 1px red;  -- remove to debug */ 
}

app.component.css

:host {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; 
  border: solid 3px yellow; /*debug */
}

.divMain {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid; /*debug */
}

.divToolBar {
    border: 3px solid red; /*debug */
}

.divLayerPresenter {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: row;
    border: 3px solid darkgrey; /*debug */
}

【问题讨论】：

标签： html css layout

【解决方案1】：

在进行另一次搜索后，我找到了这篇在 Angular 中实现自定义滚动条的文章 https://medium.com/its-tinkoff/custom-scrollbar-in-angular-93e23d47bf62

那篇文章的源代码在这里 https://stackblitz.com/edit/angular-scrollbar-component-directive

在我的项目中加入滚动条组件已经解决了问题

该解决方案需要安装以下 npm-packages

"@ng-web-apis/common": "^1.9.0",
"@ng-web-apis/resize-observer": "^1.0.3",
"@tinkoff/ng-event-plugins": "^2.2.0",

将以下内容添加到app.module.ts

import { ScrollbarModule } from './shared/components/scrollbar/scrollbar.module';
import { NG_EVENT_PLUGINS } from '@tinkoff/ng-event-plugins';

@NgModule({
  imports: [
    ....
    ScrollbarModule
  ],
  providers: [
    NG_EVENT_PLUGINS
  ],
})

将图层包裹到 layer-presenter.component.html

中的自定义滚动条中

<scrollbar class="divLayers">
    <div *ngFor="let il of getLayers()">
        <img class="divFloatLayer" 
            [src]="il.img_src" 
            [style.left]="il.getLeftPx()"
            [style.top]="il.getTopPx()"
            [style.z-index]="il.getZindex()"
            [style.transform]="il.getTransform()"
        />
    </div>
</scrollbar>
<app-layer-list class="divLayerList"></app-layer-list>

现在滚动条仅在 layer-presenter 组件中出现，而不是在浏览器的主视口中出现

【讨论】：