BrowserViewportScroller not honoring native scroll margin about angular

[atscott]

This looks more like a BrowserViewportScroller issue rather than a Router one. scrollToElement relies only on the internal offset and does not look at the styles on the element. There's no runnable reproduction in this report but I suspect if you provided a custom implementation that does that instead of what's here, it would work correctly.

[mmorris8]

That would be the function that needs to change for this bug to be fixed.

And I call it out as a bug because intuitively the behavior of this scrollTo should match the native behavior of hashes. The scrollMargin css property exists precisely because of the sticky and fixed headers. The offset property can remain for backwards compatibility, but the properties need to be honored because that's why they exist. They are honored by all browsers except IE.

The below should work. I'll look into figuring out how to do a pull request over the weekend.

private scrollToElement(el: HTMLElement): void {
    const rect = el.getBoundingClientRect();
    const left = rect.left + this.window.pageXOffset;
    const top = rect.top + this.window.pageYOffset;
    const marginLeft = parseFloat(getComputedStyle(el).scrollMarginLeft);
    const marginTop = parseFloat(getComputedStyle(el).scrollMarginTop);

    const offset = this.offset();
    this.window.scrollTo(left + marginLeft - offset[0], top + marginTop - offset[1]);
  }

[atscott]

Right, I agree.

They are honored by all browsers except IE

This, historically, would be the reason the issue exists. The implementation here has existed since before IE was dropped and potentially before the current set of browsers all fully supported it as well.

[michael-lloyd-morris]

This is the account that I will be issuing the PR from. I'll look up the guidelines and try to get something in on Saturday. I imagine test revision will be the largest segment.