Липкая боковая панель со свитком Angular

Question

Я разрабатываю веб-приложение с angular, что я хотел сейчас сделать - это StickySidebar с функцией прокрутки, но сейчас боковая панель только показывает, но не прокручивает вниз. Я попробовал несколько вещей, таких как overvlow = scroll или overflow-y = auto pr cdk-scrollable на стороне html, но эти вещи мне не помогли, может кто-нибудь дать мне указатель, может быть?

CSS

 @media only screen and (min-width: 992px){
  .desktopss {

    overflow: scroll;
    -ms-scrollbar-base-color: #232323;

    &.filter-map-mode, &.screen-height {
      margin-top: -63px;
      padding: 31px 0px 30px 0px;
      overflow: scroll;
    }
    &.filter-map-mode{
      min-height: 627px;
      max-height: calc(100vh - 276px);
      height: 100%;
    }
    &.screen-height{
      height: 100vh;
      padding-bottom: 81px
    }
  }

}

@media only screen and  (max-width: 991px){
  .desktopss{
    margin-top: 0px !important;
  }
  .filter-map-mode{
    height: unset;
    overflow: unset;

  }
  .filter-map-mode::-webkit-scrollbar{
    display: unset;
  }
}

HTML

<div class="sticky-gate">
        <div class="sticky-scrollable" cdk-scrollable>
          <div class="desktop-filter">
            <div class="filter-container" *ngIf="isDesktopView">
              <div class="filter-wrap" (mouseenter)="cursorOnFilter = true; " (mouseleave)="cursorOnFilter = false">


                <landwirtde1-farm-list-filter-ui [filter]="filter" [mapMode]="mapIsViewing"  [coverScreenHeight]="true"
                                                 [filterScrollWhenMap]="filterScrollWhenMap" (onScrolledInFilterUIAtMap)="filterScrollWhenMap = $event"
                                                 (onScrollYMaxIsDetermined)="filterScrollMax = $event">
                </landwirtde1-farm-list-filter-ui>
              </div>
            </div>
          </div>
        </div>
      </div>

Answer 1

Я бы предложил попробовать его со свойством position: sticky CSS.

Эта функция широко поддерживается основными браузерами: https://caniuse.com/#feat = css -sticky

Больше информации из документации Mozilla .