How to make a Scrollbox with Scrollspy
JavanXD opened this issue · comments
Javan Rasokat commented
I added this scrollbox to the scollspy example but i don't get it work.
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