Scrollbar Hidden not working

[Gabb1995]

<drag-scroll #dragscroll *ngIf="thumbnails && thumbnails.length !== 0" style="height: 100%" [scrollbar-hidden]="true">
     <app-thumbnail (click)="wlService.scrollToRegistration()" *ngFor="let thumbnail of thumbnails"
          [model]="thumbnail" drag-scroll-item></app-thumbnail>
 </drag-scroll>

I added the option scrollbar-hidden but I still see the scrollbar at the bottom on desktop devices. When I inspect element I see that drag-scroll-content div has the attribute overflow: auto.

To fix it myself I had to do:

.drag-scroll-content {
  overflow: hidden !important;
}

which is not nice. Is it possible to let me know if im doing something wrong?

Version: "ngx-drag-scroll": "^7.4.3",

[thomascayne]

I agree with @Gabb1995 I am creating a scrollable tab, where the tab items (title bar) shows buttons to the left/right. There was a blank space where the scrollbar was which pushing the tab content down. The following removed the empty space where the scrollbar was without affecting functionality of ng-drag-scroll

.drag-scroll-content {
  overflow: hidden !important;
}

.drag-scroll-container {
  height: auto !important;
  .drag-scroll-content {
    height: auto !important;
    overflow: hidden !important;
    width: auto !important;
  }
}

"ngx-drag-scroll": "^8.0.0-beta.2"

[yociduo]

The root cause is that the component can't get the event when the child node width and height change. For example, the child component is an image, After image loading, the image will be loaded as the actual size, but the component can't the real size when initialize.

[Thomas1664]

I have the same problem and I am unable to override it:

<div _ngcontent-nfc-c12="" class="drag-scroll-content" drag-scroll="true" style="width: 100%; height: 100%; overflow: auto hidden; display: block; white-space: nowrap;"></div>

Please fix it!!!

[bfwg]

Hey @Thomas1664 , which version of the library are you using? Have you tried the latest release?

[Thomas1664]

Hey @Thomas1664 , which version of the library are you using? Have you tried the latest release?

package.json:

"ngx-drag-scroll": "^9.0.0-beta.3"

[bfwg]

I'm having a hard time reproducing the issue on my end. I would be grateful if you can create a https://plnkr.co/ with your use case so I can work the fix form there.

[Thomas1664]

the problem is that although I disabled scrollbars, .drag-scroll-content has overflow-x: auto. But it should be hidden since scrollbars are disabled.

<drag-scroll _ngcontent-vxv-c54="" class="svg-draggable" _nghost-vxv-c12="" ng-reflect-scrollbar-hidden="true"
  ng-reflect-y-disabled="true" style="pointer-events: auto;">
  <div _ngcontent-vxv-c12="" class="drag-scroll-wrapper drag-scroll-container"
    style="width: 100%; height: 124px; overflow: hidden;">
    <div _ngcontent-vxv-c12="" class="drag-scroll-content" drag-scroll="true"
      style="width: 100%; height: 100%; overflow: auto hidden; display: block; white-space: nowrap;">
      <div _ngcontent-vxv-c54="" style="width: 100%">
      </div>
    </div>
  </div>
</drag-scroll>

I think I have a solution for this problem:
Check if scrollbars are disabled in ngOnChanges:

if (this.xDisabled || this.disabled) {
      this.disableScroll('x');
    } else {
      this.enableScroll('x');
    }

    if (this.yDisabled || this.disabled) {
      this.disableScroll('y');
    } else {
      this.enableScroll('y');
    }

If you're fine with my suggestion I would create a PR and apply the fix.

[DanteDeRuwe]

Have the same issue on https://zappr.deruwe.me/
There you can see no scrollbars, but if you zoom in and out they're there. sometimes they show up as lines randomly

[bfwg]

Yes please @Thomas1664 , sorry I wasn't getting back to you sooner.