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

How to make a Scrollbox with Scrollspy #176

Open
JavanXD opened this issue Sep 6, 2017 · 0 comments
Open

How to make a Scrollbox with Scrollspy #176

JavanXD opened this issue Sep 6, 2017 · 0 comments

Comments

@JavanXD
Copy link

JavanXD commented Sep 6, 2017

I added this scrollbox to the scollspy example but i don't get it work.

29814541-04733b9c-8cae-11e7-8ef8-2ddce94b3db3

Can you help me making scrollspy on a scrollable box?

import { Component } from '@angular/core';

@Component({
  selector: 'app-scrollbox',
  styleUrls: [ '../page.component.scss' ],
  template: `
    <div class="container">
      <div class="row">
        <div class="col-md-9 myScrollArea" role="main" scrollSpy scrollSpyElement="myScrollArea">
          <div class="main" [scrollSpyIndex]="{id: 'home', selector: 'anchor'}">
            <div>
              <h2 id="home" class="anchor">Home</h2>
              <p>Lorem ipsum...</p>
              <h3 id="services" class="anchor">Services</h3>
              <p>Lorem ipsum...</p>
              <h3 id="clients" class="anchor">Clients</h3>
              <p>Lorem ipsum...</p>
              <h2 id="about" class="anchor">About Us</h2>
              <p>Lorem ipsum...</p>
              <h3 id="contact" class="anchor">Contact</h3>
              <p>Lorem ipsum...</p>
            </div>
          </div>
        </div>

        <div class="col-md-3" role="complementary">
          <scrollSpy-index-render
            [scrollSpyIndexRenderOptions]="{id: 'home', spyId: 'myScrollArea', topMargin: 90}"
            [scrollSpyAffix]="{topMargin: 70, bottomMargin: 70}"
            class="hidden-print hidden-xs hidden-sm">
          </scrollSpy-index-render>
        </div>
      </div>
    </div>

  `,
})
export class ScrollboxComponent {

}
.myScrollArea {
    max-height:500px;
    overflow-y:auto;
    overflow-x:hidden;
    background:lightcyan;
  }

You can use this demo https://github.com/JavanXD/ngx-scrollspy-angular-cli-demo/tree/scrollbox

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

No branches or pull requests

1 participant