Position fixed elements are getting cutoff

[Athulkrishnankr]

Reproduction

I have a dialog window with position fixed. Its working fine if I move the dialog window out of the scrollbar.

Expected Behavior

The dialog window should not get cut off.

Actual Behavior

The window is getting cut off.

Environment

• Angular:18.2.1
• ngx-scrollbar: 15.1.3
• Browser(s): Chrome
• Operating System: Windows 10

[MurhafSousli]

Please add a reproduction https://stackblitz.com/edit/ngx-scrollbar

[Athulkrishnankr]

I checked the css of the scrollbar, this is the line causing the issue.
.ng-scroll-content { contain: content }

When I remove this, it works fine.

[MurhafSousli]

Yes, absolute and fixed elements won't work properly with contain: content wrapper

[sharathdaniel]

Yes, absolute and fixed elements won't work properly with contain: content wrapper

Omg, really? Then what's the solution?

[MurhafSousli]

You said when you remove it, it works! then what's the issue?

[montella1507]

@MurhafSousli we have the same problem.

<ng-scrollbar
    hoverOffset="true"
    orientation="vertical"
    class="w-full flex flex-1 flex-col overflow-y-auto overflow-x-hidden"
>
    <div class="padding scrollViewport">
        <ng-content></ng-content>
    </div>
</ng-scrollbar>

and we have "fixed buttons"

The problem is, that contain: content has element with .ng-scroll-content class

But when i set contain: none
our buttons works, however, ALL scrollbars are bugged now:

[montella1507]

Hacked with:

  ::ng-deep > ng-scrollbar {
      .ng-scroll-content {
        contain: none !important;
      }

      scrollbar-y {
        position: fixed !important;
        top: calc(100vh - var(--viewport-height)) !important;
        left: calc(100% - 12px);
      }
    }

in component containng that ng-scrollbar and fixed button.

[MurhafSousli]

@montella1507 I think a better solution without a hack, if you place your button outside the scrollbar component and make it absolute to the bottom

<div class="relative-position-container">
  <ng-scrollbar class="full-height" hoverOffset orientation="vertical">
    <ng-content/>
  </ng-scrollbar>

  <button class="absolute-bottom">segment</button>
</div>

If your button is projected via content, you can use

<div class="relative-position-container">
  <ng-scrollbar class="full-height" hoverOffset orientation="vertical">
    <ng-content/>
  </ng-scrollbar>

  <div class="absolute-bottom">
     <ng-content select="button.action-button"/>
  </div>
</div>

[montella1507]

Yeah, however, this is not possible :-/
Those buttons are used inside of the page and they are changes to fixed in mobile resolution

// page component

<ng-scrollbar
   ...
>
    <div class="padding scrollViewport">
        <ng-content></ng-content>
    </div>
</ng-scrollbar>

// layout

<se-top-barr></se-top-bar>
<main>
    <se-menu></se-menu>
    <se-page>
        <router-outlet></router-outlet>
    </se-page>
</main>

// any page loaded "to the" router outlet

<se-breadcrumb></se-breadcrumb>
    <se-page-title-wrapper>
        <se-page-title>
           Hello!
        <se-help-choice></se-help-choice>
    </se-page-title>

    <se-page-buttons> <<<<<< those fixed buttons
        <se-button
            Nová automatizace
        </se-button>
    </se-page-buttons>
</se-page-title-wrapper>

<se-page-content>
  content itseld
</se-page-content>

So particular page is loaded "inside of the page" (inside of the scrollbar).
I can create some kind of workaround with "sending" of template to 2 different places... however this is way more work to do..

BTW why is contain: content so neccessary there? i though it is only usually used as an optimization.

[MurhafSousli]

@montella1507 The plugin uses the sticky position technique to hold the scrollbars position while scrolling the viewport. the advantage of using sticky that you are able to scroll via mouse wheel while pointer is over the scrollbar, that was not possible when you use absolute positioning because the scrollbars would block the wheel event while pointer is over the scrollbar.

Maybe this is a absurd detail and maybe most users don't care about it. but I wanted to mimic the original scrollbar functionality.

So this was a solution an overwhelming options we provided in older versions called pointerEventsMethod where each option had pros and cons.

contain: content is required in this technique, but I cannot remember the exact reason ATM.

I am looking forward to find a better way, hopefully when I find sometime soon.

[montella1507]

I had to really move those buttons to the "root" compoennt. It was really glitching around.

So used conditional template portals..

so,. as for the inspiration..

@if (!mobile()) {
    <div class="buttons-wrapper">
        <ng-container [ngTemplateOutlet]="templateRef"></ng-container>
    </div>
}

<ng-template #templateRef>
    <ng-content></ng-content>
</ng-template>

....

// abstraction - hosting for buttons
  private pageButtonHostings = inject(PAGE_BUTTON_HOSTINGS);

  checkMobileView() {
    const windowWidth = window.innerWidth;
    if (windowWidth < 768) {
      this.attachToRoot(this.template()!);
      this.mobile.set(true);
    } else {
      this.detachFromRoot();
      this.mobile.set(false);
    }
  }


  attachToRoot(templateRef: TemplateRef<any>) {
    const portal = new TemplatePortal(templateRef, this._viewContainerRef);
    this.pageButtonHostings.setButtonsPortal(portal);
  }

  detachFromRoot() {
    this.pageButtonHostings.setButtonsPortal();
  }

"root component" - aka hosting.

export class LayoutComponent implements OnInit, PageButtonHostings {
  ICONS = {
    seRotateDevice: seRotateDevice,
  };
  protected hiding = false;
  protected previousScrollOffset = 0;
  private scrollService = inject(ScrollDispatcher);
  private terminator = injectDestroy();
  private cdr = inject(ChangeDetectorRef);
  menuOpenedState = false;

  menuChanged(state?: boolean) {
    if (state != undefined) {
      this.menuOpenedState = state;
    } else {
      this.menuOpenedState = !this.menuOpenedState;
    }
  }

  buttonsPortal?: TemplatePortal<any>;

  setButtonsPortal(portal?: TemplatePortal<any>) {
    this.buttonsPortal = portal;
    this.cdr.detectChanges();
  }

  ngOnInit() {
    this.scrollService
      .scrolled(16)
      .pipe(takeUntil(this.terminator))
      .subscribe((val) => {
        if (val) {
          const previousHiding = this.hiding;
          const newValue = val.measureScrollOffset('top');
          this.hiding =
            newValue > this.previousScrollOffset &&
            Math.floor(val.measureScrollOffset('bottom'))! > 10;
          this.previousScrollOffset = newValue;
          if (previousHiding != this.hiding) {
            this.cdr.detectChanges();
          }
        }
      });
  }
}

usage:

result:

Screen.Recording.2024-12-19.at.23.32.22.mov