Use position: sticky with OverlayScrollbars

[smorandi]

I have basically the same issue as stated here: https://github.com/KingSora/OverlayScrollbars/issues/89

However, my case is for the width and not on the body but on some arbitrary div. I tried also setting the width to auto on the 'os-content', but somehow did not work the same way.

as i am using angular my component looks like this:

  template: `
    <overlay-scrollbars>
      <div class="mat-title sticky-header-panel-header">{{header}}</div>
      <ng-content></ng-content>
    </overlay-scrollbars>
  `,

and styling looks like this:

      :host {
          display: block;
          height: 100%;
          width: 100%;

          overflow: hidden;
      }
      
      overlay-scrollbars {
          height: 100%;
         width: 100%;
      }

      .sticky-header-panel-header {
          position: sticky;
          top: 0;
          left: 0;
          z-index: 1;

          text-align: center;
          white-space: nowrap;
      }

thw whole thing is wrapped in an div whose width is obviously less than the width of a component contained in that panel.

so i do see the scrollbars, however once i scroll to the right side, the sticky attribute is not respected anymore.

if i do the same thing without scrollbars it works as expected (using setup below)

  template: `
      <div class="mat-title sticky-header-panel-header">{{header}}</div>
      <ng-content></ng-content>
  `,

      :host {
          display: block;
          height: 100%;
          width: 100%;

          overflow: auto;
      }
      
      /*overlay-scrollbars {*/
      /*    height: 100%;*/
      /*    width: 100%;*/
      /*}*/

      .sticky-header-panel-header {
          position: sticky;
          top: 0;
          left: 0;
          z-index: 1;

          text-align: center;
          white-space: nowrap;
      }

Do you have any clue as of why that's the case?

[KingSora]

Good day!

I might have an idea, could you create a live example on StackBlitz or CodeSandbox?

[smorandi]

Have a look here: https://codesandbox.io/s/angular-urzw2

Sicne this is my very first approach on code-sandbox i wasnt quite able to figure out how to properly integrate everything. so i have only an example using the "normal" scrollbars. but the height and width settings, especially percentage do not seem to work quite as expected on the codesandbox "browser"...

anyway, i hope this helps

[KingSora]

Thanks! For me as reference: https://codesandbox.io/s/angular-i6v0o until I have time to solve the issue.

[smorandi]

Sure, and thanks for looking into this :)

[KingSora]

Alright, I have bad news for you.. I'm sorry. Currently your implementation of position: sticky isn't possible, unless you make some substantial changes. You see, currently all the content gets wrapped by a bunch of elements. Two of these elements are called .os-viewport and .os-content. The content is directly inside .os-content and thats the problem. Position sticky element has to be the direct child of the viewport element. So the change which has to be made is that your sticky element has to be added as child to the .os-viewport instead of the .os-content element. Maybe you can achieve that with some tricks (.os-viewport is the parent of .os-content) I'm not sure, but I'll try my best to adress this issue in v2.0.0 of the plugin.

[smorandi]

Ah, bummer, but never mind :) thanks a lot for clarifying the issue, much appreciated.

[hmz777]

I was trying to do the same thing, and what worked for me is to apply position: -webkit-sticky !important and position: sticky !important (to override the plugin styles) to the os-host class instead of the original position: relative and it worked, but maybe @KingSora can verify if this is a reliable solution because I am not sure.

[KingSora]

@hmz777 Good day!

Yes this works, but only for vertical stickyness. In the moment where you have a horizontal overflow and you start scrolling to left or right it wont work. And that was the problem form @smorandi

[KingSora]

@smorandi I stumbled upon a solution to the horizontal sticky problem of yours. If you set the style of the .os-content element to display: inline it actually works. I know some time passed already since you posted your issue, but better later than never.

[smorandi]

cool, good to know - and yes, better late than never ;)

[KingSora]

v2 released today which should also improve on this behavior :)