Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

angular-contents not targeting a container with overflow #4

Closed
gagandeepgill opened this issue Jan 11, 2018 · 5 comments
Closed

angular-contents not targeting a container with overflow #4

gagandeepgill opened this issue Jan 11, 2018 · 5 comments
Labels

Comments

@gagandeepgill
Copy link

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
Copy link
Owner

zurfyx commented Jan 11, 2018

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
Copy link
Author

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
Copy link
Owner

zurfyx commented Jan 14, 2018

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
Copy link
Owner

zurfyx commented Jan 16, 2018

@gagandeepgill you can track its progress here #5

@zurfyx
Copy link
Owner

zurfyx commented Jan 17, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants