angular-contents not targeting a container with overflow

[gagandeepgill]

Hi, just want to say you've done amazing work with this package. I was wondering if there is a workaround to let contentsLink target within a container that has overflow? It doesn't highlight the section when you scroll over it in a scrollable container.

If there isn't a workaround for it, would you later add the feature whenever you have time, that would be greatly appreciated. Similarly how ng2-page-scroll has a feature to target certain containers to scroll.

Thanks!

[zurfyx]

Hey @gagandeepgill ,

Scrollable content iframe-like? I'm not too sure on how I would implement that at the moment, can you point me out how ngx-page-scroll is doing this?

[gagandeepgill]

import { Component, Inject, ViewChild, ElementRef } from '@angular/core';
import { DOCUMENT} from '@angular/common';
import { PageScrollConfig, PageScrollService, PageScrollInstance } from 'ngx-page-scroll';

@Component({
    template: `
        <p>Main content</p>
        <!-- Further content here -->
        <h2 id="head2">Part in a container</h2>
        <div #container> // <--------------------- #container
            <p>Container content</p>
            <h3 id="head3">Heading</h3>
        </div>`
})

export class MyComponent {

     @ViewChild('container')
     private container: ElementRef;

constructor(private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: any) {}

public goToHeadingInContainer(): void {
         let pageScrollInstance: PageScrollInstance = PageScrollInstance.newInstance({document: this.document, scrollTarget: '.headingClass', scrollingViews: [this.container.nativeElement]});
         this.pageScrollService.start(pageScrollInstance);
     };
}

You just add #container to an element that has an attribute of overflow. You can replace scrollTarget: '.headingClass' to scrollTarget: '#section-one' in your case. I hope this helps!

[zurfyx]

Hey @gagandeepgill,

I had a look into it, it might be feasible, but I have to think about the container inside container case before I get anything published. It doesn't look trivial, I might also have to handle outer scrolls other than the container scroll. I will try to look into ngx-page-scroll to see what they do in such edge case during this week and see if I can come up with something that makes sense for a table of contents.

[zurfyx]

@gagandeepgill you can track its progress here https://github.com/zurfyx/angular-contents/pull/5

[zurfyx]

Implementation live as of v2.0.2. You can check the demo here.