JonnyBGod / ngx-scrollspy

Angular ScrollSpy Service

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to make a Scrollbox with Scrollspy

JavanXD opened this issue · comments

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