How can I scroll to the selected option after page refresh?

Asked Oct 04 '18 at 14:20

Active Oct 09 '18 at 06:34

Viewed 975 times

I have searched the internet, but I couldn't find an answer to my question.

What I am doing:

I have a ng-select that do infinite scrolling.

<ng-select [(ngModel)]="selected" id="studentsSelect" bindLabel="nameSelect" class="custom" (scrollToEnd)="fetchMore($event)">
    <ng-option *ngFor="let student of infinite" [value]="student">{{student.name}}</ng-option>
</ng-select>

So the array infinite gets populated when a user scroll to the bottom of the dropdown. When the page reloads it fetch from the students array and insert into the infinite array + 10 entries (if it can), so that it can select the saved option and be viewed in the dropdown list.

Also I save the state of the dropdown. So if you go to another location and back it will keep the selected option and repeat the top paragraph.

When the user returns to this page, the selected get set. But when you open the dropdown list, it doesn't scroll to the selected option. But if you close the dropdown and open it again without doing anything else, then it scrolled to it.

I'm not sure what is happening, or if there is something that I need to set.

Also no jquery may be used.

edited Oct 09 '18 at 06:34

asked Oct 04 '18 at 14:20

JBin

you could put it on top. – itdoesntwork Oct 04 '18 at 14:23
1

i think you are mixing angular 1 and angular 6 syntax – firegloves Oct 04 '18 at 14:24
Sound like you want some event to trigger that doesn't trigger restoring the state. – Mark Baijens Oct 04 '18 at 14:28
@firegloves Yeah, I'm super new to angular. – JBin Oct 05 '18 at 06:13
@itdoesntwork that is a cool idea – JBin Oct 05 '18 at 06:14
@MarkBaijens, yeah feels like after you clicked the drop down, an event gets fired, doing the scroll thing, but doesn't update the view immediately or something – JBin Oct 05 '18 at 06:17
@itdoesntwork idea was rejected... – JBin Oct 05 '18 at 06:54
@JBin, I don't know angular so well, so someone might know a better solution, but you could try to trigger "scrollToEnd" manually on page load. – Mark Baijens Oct 05 '18 at 14:45
checkout both the links you may get some help https://stackoverflow.com/questions/16354465/persisting-scroll-position-in-angular-after-refresh and https://stackoverflow.com/questions/17642872/refresh-page-and-keep-scroll-position, this is just to keep the scroll position on page refresh – Nilesh Jain Oct 09 '18 at 06:56

How can I scroll to the selected option after page refresh?

0 Answers0