OverlayScrollbars using with Angular agGrid

[dev-en-debug]

The only way I've found to apply OverlayScrollbars to Angular agGrid is by using this method:

• npm install overlayscrollbars
• npm install @types/overlayscrollbars
  in .ts file:

import OverlayScrollbars from "overlayscrollbars"; 
 ...

 onGridComponentReady() {
    ...
    const osClass = document.getElementsByClassName("ag-body-viewport")[0];
    const os = 
    OverlayScrollbars(osClass, {
        className: "os-theme-dark",
        resize: "none", 
        sizeAutoCapable: true,
        paddingAbsolute: true,
        scrollbars: {
          clickScrolling: true,
        },
        nativeScrollbarsOverlaid: {
          showNativeScrollbars: false,
          initialize: true
        },
      });
  }

In other discussions js-scrollbar components are usually applied using "ag-body-viewport" class.

But there are three key problems, which doesn't allow to use this solution:

• Vertical scrolling. After applying OverlayScrollbars agGrid adds extra blank space under the table and doesn't show all rows, only some of them
• Horizontal scrolling is scrolling columns, but headers are staying still
• Applying OverlayScrollbars to agGrid breaks js-logic of agGrid in terms of buffering. Instead of destroying from the DOM rows, which are not visible to limit memory usage, agGrid starts keeping them all in DOM.

Is there any ways to solve those issues, or other way to apply OverlayScrollbars in Angular agGrid?

[KingSora]

Good day!

Unfortunately its very hard to apply OverlayScrollbars to such sophisticated libraries like agGrid. I can't promise anything, but I'll look into it.

[FontEndArt]

我也正在关注这方面的问题，并且正在尝试。但似乎agGrid的virtualList导致我并不能直接使用OverlayScrollbars进行覆盖。

我正在试图寻找一个办法，将OverlayScrollbars的viewport替换成ag的scroll容器，目的是为了保证agGrid自身的onScroll event。

---

Next is google translate：

I'm looking into this too and am trying. But it seems that the virtualList of agGrid makes me unable to directly use OverlayScrollbars to overlay.

I am trying to find a way to replace the viewport of OverlayScrollbars with the scroll container of ag, in order to ensure the onScroll event of agGrid itself.

[KingSora]

@FontEndArt this should be possible with v2. I'll try to launch a beta at the end of the month

[KingSora]

@FontEndArt @dev-en-debug would you be able to provide an example on codesandbox or stackblitz? Then I can look into it and provide a working solution.

[benjamin-hoefer-fnt]

Are there any updates related to this topic? Have there been any adjustments to make overlay scrollbars work in conjunction with ag-grid?

[KingSora]

@benjamin-hoefer-fnt With v2 the initialization is possible.

I've made an example here: https://codesandbox.io/s/laughing-sanderson-pn255v?file=/src/Grid.tsx (the logic starts at line 86 and goes to 146).

Its a little more complex than I would like, but since agGrid is pretty sophisticated and handles the x and y scroll axis completely separately its not a surprise to me.

The example is in react because thats the example I could find the quickest, if you would like to have one in Angular please create an similar example which I can use to edit.

[benjamin-hoefer-fnt]

Thank you so much for your work! I will get back to it as soon as I has to implement it for our agGrid table. I will give you an update when I am on it.

[FontEndArt]

@benjamin-hoefer-fnt通过v2初始化是可能的。

我在这里举了一个例子： https: //codesandbox.io/s/laughing-sanderson-pn255v ?file=/src/Grid.tsx（逻辑从第 86 行开始，到第 146 行）。

它比我想要的要复杂一点，但由于 agGrid 非常复杂并且完全单独处理 x 和 y 滚动轴，这对我来说并不奇怪。

这个例子是react因为这是我能找到最快的例子，如果你想在 Angular 中有一个例子，请创建一个类似的例子，我可以用它来编辑。

emmm，居然是以这种形式去替换掉AG的滚动条，但是这样AG还可以正常开启虚拟滚动而不受影响吗？

[benjamin-hoefer-fnt]

@KingSora I implemented agGrid overlayscrollbars solution analog to your React example using Angular.

I utilized Renderer2 of Angular for DOM manipulation and it works the same way as in your example!

Thank you for your great support! I really appreciate.

[benjamin-hoefer-fnt]

I just discovered this small issue here:

Do you have an idea how to prevent the scrollbars from overlapping? I think it has something to do with the separate initialization of the vertical and horizontal scrollbar.

[KingSora]

@benjamin-hoefer-fnt Your right, since the horizontal scrollbar doesn't know anything about the vertical scrollbar they are overlapping. As a workaround you could style both scrollbars to not overlap. (the vertical scrollbars bottom css property has to be the height of the horizontal scrollbar and the horizontal scrollbars right css property has to be the with of the vertical scrollbar)

[benjamin-hoefer-fnt]

I will give it a shot! Thx :)

[benjamin-hoefer-fnt]

Just to let you now you've got the possibility to supress e.g. the native horizontal scrollbar of ag grid by setting the 'suppressHorizontalScroll' to true so you do not have to remove the scrollbar manually:

Because this remove() method caused a short flickering for me which I could prevent by suppress the scrollbar by default and add OverlayScrollbars to it.

[KingSora]

Since this issue seems to be solved now, I'll proceed with closing it.

In case there are any other issues please don't hesitate to give feedback here or to open a new issue :)

[KingSora]

Related: #639

[gthau]

@KingSora I implemented agGrid overlayscrollbars solution analog to your React example using Angular.

I utilized Renderer2 of Angular for DOM manipulation and it works the same way as in your example!

Thank you for your great support! I really appreciate.

Hi @benjamin-hoefer-fnt, would you be able to share a code sample to demonstrate how you manage the AgGrid - OverlayScrollbars Angular integration? Thank you.