Question

我正在开发一个带有角度的Web应用程序，我现在想做的是带有滚动功能的StickySidebar，但是现在侧边栏仅显示但不向下滚动。我在html端尝试了诸如overvlow = scroll或overflow-y = auto pr cdk-scrollable的一些操作，但是这些操作并没有帮助我，有人可以给我一个指针吗？

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 documentation的更多信息。

带滚动角度的粘性侧边栏

1 个答案: