fix(module:anchor): fix scroll bar misplacement in target container (#…

…3242)
NG-ZORRO · Apr 19, 2019 · 37ac541 · 37ac541
1 parent 53724be
commit 37ac541
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/components/anchor/anchor.spec.ts b/components/anchor/anchor.spec.ts
@@ -159,11 +159,14 @@ describe('anchor', () => {
         expect(window.addEventListener).toHaveBeenCalled();
       });
       it('with string', () => {
+        spyOn(context, '_click');
         const el = document.querySelector('#target')!;
         spyOn(el, 'addEventListener');
         context.nzTarget = '#target';
         fixture.detectChanges();
         expect(el.addEventListener).toHaveBeenCalled();
+        page.to('#basic-target');
+        expect(context._click).toHaveBeenCalled();
       });
     });
 
@@ -255,6 +258,7 @@ describe('anchor', () => {
       <nz-link nzHref="http://www.example.com/#id" nzTitle="complete" class="mock-complete"></nz-link>
       <nz-link nzHref="#parallel1" nzTitle="parallel1"></nz-link>
       <nz-link nzHref="#parallel2" nzTitle="parallel2"></nz-link>
+      <nz-link nzHref="#basic-target" nzTitle="basic-target"></nz-link>
     </nz-anchor>
     <h2 id="何时使用"></h2>
     <div style="height: 1000px"></div>
@@ -273,7 +277,10 @@ describe('anchor', () => {
     </table>
 
     <div style="height: 1000px"></div>
-    <div id="target"></div>
+    <div id="target">
+      <div style="height: 1000px"></div>
+      <h2 id="basic-target"></h2>
+    </div>
   `
 })
 export class TestComponent {

diff --git a/components/anchor/nz-anchor.component.ts b/components/anchor/nz-anchor.component.ts
@@ -122,14 +122,17 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit {
       return 0;
     }
     const rect = element.getBoundingClientRect();
-    if (!rect.width && !rect.height) {
-      return rect.top;
+    if (rect.width || rect.height) {
+      if (this.getTarget() === window) {
+        return rect.top - element.ownerDocument!.documentElement!.clientTop;
+      }
+      return rect.top - (this.getTarget() as HTMLElement).getBoundingClientRect().top;
     }
-    return rect.top - element.ownerDocument!.documentElement!.clientTop;
+    return rect.top;
   }
 
   handleScroll(): void {
-    if (this.destroyed || this.animating) {
+    if (typeof document === 'undefined' || this.destroyed || this.animating) {
       return;
     }
 
@@ -141,12 +144,14 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit {
         return;
       }
       const target = this.doc.getElementById(sharpLinkMatch[1]);
-      if (target && this.getOffsetTop(target) < scope) {
+      if (target) {
         const top = this.getOffsetTop(target);
-        sections.push({
-          top,
-          comp
-        });
+        if (top < scope) {
+          sections.push({
+            top,
+            comp
+          });
+        }
       }
     });
 
@@ -177,6 +182,7 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit {
       '.ant-anchor-link-title'
     ) as HTMLElement;
     this.ink.nativeElement.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
+    this.visible = true;
     this.cdr.detectChanges();
 
     this.nzScroll.emit(comp);
@@ -190,7 +196,7 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit {
 
     this.animating = true;
     const containerScrollTop = this.scrollSrv.getScroll(this.getTarget());
-    const elOffsetTop = this.scrollSrv.getOffset(el).top;
+    const elOffsetTop = this.getOffsetTop(el);
     const targetScrollTop = containerScrollTop + elOffsetTop - (this.nzOffsetTop || 0);
     this.scrollSrv.scrollTo(this.getTarget(), targetScrollTop, undefined, () => {
       this.animating = false;