how to remove the right padding of body when show a modal

[yzy1197988245]

What problem does this feature solve?

每次show modal 的时候右边多一个空白，body不会出现滚动条

What does the proposed API look like?

加一个配置项

[hemiaoio]

同样关注ing...

[wzhudev]

It seems that it was fixed in recent commits. See https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/modal/nz-modal.component.ts.

private changeBodyOverflow(): void {
    const openModals = this.modalControl.openModals;

    if (openModals.length) {
      this.renderer.setStyle(this.document.body, 'padding-right', `${this.nzMeasureScrollbarService.scrollBarWidth}px`);
      this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
    } else {
      this.renderer.removeStyle(this.document.body, 'padding-right');
      this.renderer.removeStyle(this.document.body, 'overflow');
    }
  }

But I think the padding should be added before the modal shows up, just like antd.

[wilsoncook]

@yzy1197988245 @hemiaoio
Now the modal shown strategy is the same with antd, let's make it more clear, do you want a option to avoid adding the padding-right:Npx to body?

[hemiaoio]

@wilsoncook YES. Now open the modal window, the back window will shake, visually feel uncomfortable

[yzy1197988245]

@wilsoncook YES

[lopn]

ng-zorro-antd/components/modal/nz-modal.component.ts

Line 417 in 6ae4467

this.renderer.setStyle(this.document.body, 'padding-right', `${this.nzMeasureScrollbarService.scrollBarWidth}px`);

[lopn]

padding-right 不能每次都加， 我觉得最合理的是应该先判断页面是否有滚动条，如果有获取bar宽度，加padding-right, 否则不加

[lopn]

ng-zorro-antd/components/core/services/nz-measure-scrollbar.service.ts

Line 18 in 6ae4467

get scrollBarWidth(): number {

修改成

  get scrollBarWidth(): number {
    if(document.body.scrollHeight <= (window.innerHeight || document.documentElement.clientHeight)){
         return 0;
      }

    if (isNotNil(this._scrollbarWidth)) {
      return this._scrollbarWidth;
    }
    this.initScrollBarWidth();
    return this._scrollbarWidth;
  }

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.