Блог

Я работаю над приложением Angular, которое предназначено для выполнения некоторых базовых операций со слоями: добавление и расположение слоев, масштабирование, поворот и т. Д.

На следующем изображении, например, были добавлены 3 слоя, фон и два слоя, которые имеют прозрачность, они были расположены с помощью div с position: absolute

Как вы можете видеть, когда какой-либо из слоев превышает доступную высоту или ширину, создаются полосы прокрутки.

Мне нужны эти полосы прокрутки (как вертикальные, так и горизонтальные) в компоненте с зеленой рамкой. Таким образом, внутри зеленого компонента (разделителей) будет отображаться изображение любого размера, включая небольшие изображения, которые расположены очень широко или внизу.

Я проверил много учебных пособий об этом, но во всех из них используются элементы, расположенные относительно внутри компонента, в котором есть свитки.

Я нашел что-то близкое к тому, что мне нужно, но не понимаю, как это применить. 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 */ 
}
 

приложение.компонент.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 */
}
 

После очередного поиска я наткнулся на эту статью, в которой реализована пользовательская полоса прокрутки в Angular https://medium.com/its-tinkoff/custom-scrollbar-in-angular-93e23d47bf62

Исходный код этой статьи находится здесь https://stackblitz.com/edit/angular-scrollbar-component-directive

Включение компонента полосы прокрутки в мой проект решило проблему

Это решение требует установки следующих npm-пакетов

 "@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, а не в главном окне просмотра браузера