Feature: Scroll offset instead of target

[HarelM]

To continue the discussion at issue #10:
here is a snippet describing what I want to achieve with some comment to help clarify:

// this is called when a dialog is opened using the ngAfterViewInit- there's no clear event here to use.
let dialogElement = $(".dialog-content-for-scroll"); // this is the element I want to scroll, I can provide ElementRef if the ScrollTo API would accept it.
        dialogElement.delay(700)
            .animate({
                scrollTop: this.state.scrollPosition // I don't want to scroll to another element but rather to a position offset in "dialogElement"
            },
            "slow");
        dialogElement.on("scroll", () => {
            this.state.scrollPosition = dialogElement.scrollTop(); // this is used to get the current position when this dialog scrolls so that next time I open it, it will open in the same scroll position.
            this.sharedStorageService.set(OsmUserDialogComponent.OSM_USER_DIALOG_STATE_KEY, this.state);
        });

Here's my current implementation without JQuery:

class SomeComponenet {
...
@ViewChild("dialogContentForScroll") dialogContent: ElementRef;
...
public ngOnInit() {
...
        let dialogElement = this.dialogContent.nativeElement as HTMLElement;
        // the following is the code I want to replace with a service:
        setTimeout(() => dialogElement.scrollTop = this.state.scrollPosition, 700);
        // end, below code is fine as is.
        dialogElement.onscroll = () => {
            this.state.scrollPosition = dialogElement.scrollTop;
            this.sharedStorageService.set(OsmUserDialogComponent.OSM_USER_DIALOG_STATE_KEY, this.state);
        }
...

[nicky-lenaers]

@HarelM Thanks for the above examples. I've looked into it and as far as I can see, the following is desired:

• You want to scroll to specific position (a.k.a. position offset) in dialogOffset dialogElement.
• You do not want to target any element, just an offset (from the top I assume?).
• You would like to pass in an ElementRef to specify the container that needs to be scrolled.

Can you conform and/or update these statements? It makes it a little clearer on what needs to be done.

[HarelM]

I think you understood it correctly.
The following is the line I would like to replace with the scroll to functionality:
setTimeout(() => dialogElement.scrollTop = this.state.scrollPosition, 700);
This method does not animate while I want it to be animated scroll (this is the main benefit from using this library in this case).
Not sure what you mean by dialogOffset but yes, an offset in ElementRef from the top.

[nicky-lenaers]

@HarelM updated my comment, you're right, dialogOffset should have been dialogElement. There's some other issues with higher prio, but I'll keep this is development. I expect this to be done within a couple of weeks.

[HarelM]

Any updates on this?

[nicky-lenaers]

@HarelM I've been away for a little while. Will get back to this soon enough, apologies for the delay! I'll keep you posted when the feature is implemented.

[nicky-lenaers]

@HarelM I'm happy to announce this feature has been implemented as of today. It is available on version 0.6.0. Please refer to Directive Example or Service Example for more details.

Thanks again for your issue, it is much appreciated!

[HarelM]

Thanks!!
Hopefully will be able to use it soon and let you know if it works add expected.

[HarelM]

Is it possible the documentation is incorrect?

...
const config: ScrollToConfigOptions = {
      offset
    };
...

[HarelM]

Hi,
I have tried to use the latest version (0.6.0) and I have added the ScrollToService and I think it has a bug in it:
The following code is what I tried:

console.log("after init, pos: " + this.state.scrollPosition);
        this.scrollToService.scrollTo({ offset: this.state.scrollPosition, container: this.dialogContent.nativeElement } as ScrollToConfigOptions).toPromise().then(() => {
            console.log("after scroll pos: " + this.dialogContent.nativeElement.scrollTop);
        });

And am getting the following in the console:

after init, pos: 680.4000244140625
after scroll pos: 466

I've seen that when using this service the scroll position does not get to the right place after reopening my dialog.
Let me know if you have issues reproducing this, if so I can try and create a plunker or something.

[nicky-lenaers]

@HarelM I'm not sure what part you consider incorrect, but if you mean the offset property without an explicit value assigned: I'm using the Object literal property value shorthand notation. This means that, in the case of the example, offset is the same as offset: offset, where the value as passed as an argument to the triggerScrollToOffsetOnly function. So in the case of the example, these names (offset parameter and offset property) match, which allows for the shorthand to work. Does that answer your question?

[nicky-lenaers]

Yeah it would be very useful to have a plunkr or Stackblitz for that! Let me know when you have it and I'll take a look!

[HarelM]

which allows for the shorthand to work. Does that answer your question?
It does answer my question, IMHO it would be clearer using non shorthand option.

I'll see if I can reproduce in stackblitz...

[HarelM]

Scroll position is set to: 107 (should be at the end) but when loaded it gets to around 25 only (top-middle):
https://stackblitz.com/edit/angular-scroll-to-position-issue-28
Check out app.component.ts constructor.

[nicky-lenaers]

@HarelM You're right, the offset is not correct when used inside a nested container. You can clearly see the different when i set the container at the very top of the page, because the offset then does work. Tested in a forked Stackblitz here. I'll create a new issue to solve this. Thanks again, useful feedback!

[nicky-lenaers]

@HarelM Oh I forgot to say, for now to fix this, you'll probably be able to add the offsetTop of the dialogContent to the scrollposition 👍 I'll let you know when this is fixed.

[HarelM]

Thanks for the quick response!
There's no rush on my part, I'm guessing it's an easy fix so I'll wait for a new release.
Keep up the good work!