ScrollTo is not working with body/windows container and target wrapped by a container with relative position

[Gildass]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Current behavior

When I try to scroll to a target which is inside a container (which has a css position:relative, and when the scrollable container is the page's body (window), the scroll is made to the target, but relativly to the the container position. For instance, if the container has a top position of 200px, after the scroll, the target will be positionned at 200px after the top of the screen.

Expected behavior

After the scroll, the target is positionned at the top of the page (+ the offset if an offset is configured)

Minimal reproduction of the problem with instructions

     <div>
        <h1 style="height:250px">Some content before the relative container (250px)</h1>
        <div style="position:relative; background: greenyellow">
            <div style="min-height: 200px">
                The relative container has a green background.
                <button [ngx-scroll-to]="'#scrollTarget'">Scroll to the target</button>
            </div>
            <div id="scrollTarget">The target of the scroll</div>
            <div style="min-height: 1000px; padding: 20px 0">Some content after the target</div>
        </div>
    </div>

What is the motivation / use case for changing the behavior?

Environment

Angular version: 7.0.0


Your version of `@nicky-lenaers/ngx-scroll-to`: 2.0.0


Browser:
Any browsers
 

[justindmyers]

Same here. Removing position: relative from all parent containers causes it to work, but it's completely unusable for any remotely complicated layout.

[bensgroi]

I'm seeing this as well. Angular 6.1.10 and 2.0.0 of this package.

[grmpfhmbl]

The problem is very likely here https://github.com/nicky-lenaers/ngx-scroll-to/blob/21596bce4d40628994c0697ab7c55df23968efdd/projects/ngx-scroll-to/src/lib/scroll-to.service.ts#L108-L110

When using offsetTop you'll have to check if the offsetParent is actually the container you want to scroll. If there are elements with position:relative in between, this is very likely not the case. Here is a screenshot from Chrome Developer Tools.

As you can see container is the document body and listenerTarget the window but offsetParent is some element in the DOM tree. The correct value to scroll to would be 425. For window the correct way to find the correct absolute position to scroll to is - according to MDN - to add window.scrollY + targetNode.getBoundingClientRect().top. You could probably also move up the DOM via offsetParent and add all offsetTopuntil you reach container but that would be a lot slower. Not sure if that has any advantages over adding scrollY.

This issue is likely also related to #104 and #111.