4

I am sure i must be doing something wrong but can't figure out what. Need some help/pointers.

I am using Angular 10. I have enabled anchorScrolling in app-routing.module

const routes: Routes = [
  { path: 'docs', component: DocsComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: true,
    anchorScrolling: 'enabled'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This works if the container for the jump-sections (the sections with #id where I want to scoll to) does not have property overflow:auto set , but if I set the property overflow:auto then the scrolling stops working through anchorScrolling. I can still scroll manually or by typing the url along with the fragment.

I have created a StackBlitz project to demonstrate this. The project here is working by default

https://stackblitz.com/edit/angular-ivy-ub5k7q

However if you add

overflow:auto

to the

.sections

class in the hello.component.css you will see that the section links give at the top don't result in scroll even though the url does get updated with the correct route#fragment.

Is this an expected behavior?

Prakash
  • 742
  • 7
  • 19
  • Two questions :-1. Why are you setting .sections div as position absolute and overflow:auto 2. What is your final objective in design as well as perspective (UX) ? – abhay tripathi Aug 18 '20 at 15:01
  • Is this an expected behavior? YES, CSS is behaving as it has to. What is our end goal ? – abhay tripathi Aug 18 '20 at 15:16
  • Have you seen the solution I provided ? – Alexis Aug 21 '20 at 11:44
  • @abhaytripathi , i was trying to achieve an area that is absolute wrt its parent and is scrollable when there is more content. The question about 'if it is expected behavior 'was regarding the Angular's anchorScrolling not working when the position was set to absolute. – Prakash Sep 04 '20 at 17:59

2 Answers2

2

I couldn't figure out why this is happening. Tried for minutes, but I could get to what I believe was your objective in the first place.

The changes I made (only in hello.component.css):

.sections{
  position:relative;
  top:5rem;
  border:2px solid rebeccapurple;
  overflow:auto; 
}

I removed the height you were setting up for the position property which had the value 'absolute'. I also changed the value from the position property to be relative.

It is working with the position set to be 'absolute', but whenever you apply values for width and height it stops working.

Rodolfo Spier
  • 176
  • 10
1

According to this answer, I propose you a solution without fragment, but which works.

First change your a element as follow <a (click)="toSection('1')">Section 1</a> and for each section change the number with the corresponding one.

Then in your component add this method

toSection(section: string){
  const elem = document.getElementById("section-"+section);
  const topPos = elem.offsetTop
  document.getElementById('sections').scrollTo({top:topPos-10, behavior:'smooth'})
}

With topPos-10, you got something a bit more beautiful because the top of the div is not stick to the section title.

PS : This way, in my opinion, it's a little bit better because you don't have your URL with #section at the end.

Here is the stackblitz.

Alexis
  • 1,685
  • 1
  • 12
  • 30
  • Thanks @alexis , yes it works , I was trying to use fragments so that browser back button can take back to the previous anchor location. – Prakash Sep 04 '20 at 17:55
  • the solution/workaroundn that I had finally used was where anchors use fragments and then in the component there is fragment listener that gets the event and does the scrolling using scrollTo method similar to that you have provided. – Prakash Sep 04 '20 at 18:04
  • Alright, if you have found the perfect thing for you it's nice :) – Alexis Sep 05 '20 at 14:30
  • > it's a little bit better because you don't have your URL with #section at the end This more of a disadvantage in documents since it can store important state. – Paul Jul 23 '21 at 16:59