Topic: Mdb ScrollSpy the component does not work for me.
Hi,
When I use the new component Scrollspy , I got errors like :
"ERROR TypeError: Cannot set property 'active' of undefined
at ScrollSpyService.push../node_modules/ng-uikit-pro-standard/esm5/ng-uikit-pro-standard.es5.js.ScrollSpyService.setActiveLin ... "
here is my code :
<header class="intro-header">
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar" [containerInside]="true">
<mdb-navbar-brand>
<a class="logo navbar-brand waves-light" mdbWavesEffect href="#">
<img src="assets/logo.png" height="40" alt="mdb logo">
</a>
</mdb-navbar-brand>
<links >
<ul class="navbar-nav ml-auto" mdbScrollSpy="menu" >
<li class="nav-item waves-light black-text" mdbWavesEffect>
<a mdbPageScroll [pageScrollInterruptible]="false" class="nav-link" mdbScrollSpyLink="intro" href="#intro" >Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item waves-light black-text" mdbWavesEffect>
<a mdbPageScroll [pageScrollInterruptible]="false" class="nav-link" mdbScrollSpyLink="aboutUs" href="#aboutUs" >About us</a>
</li>
<li class="nav-item waves-light black-text" mdbWavesEffect>
<a mdbPageScroll [pageScrollInterruptible]="false" class="nav-link" mdbScrollSpyLink="contactUs" href="#contactUs" >Contact us</a>
</li>
</ul>
</links>
</mdb-navbar>
</header>
<section id="intro" mdbScrollSpyElement="menu">...<>
<section id="aboutUs" mdbScrollSpyElement="menu">...<>
<section id="contactUs" mdbScrollSpyElement="menu">...<>
Hello,
It's strange but it looks like in this case the error is caused by mdbWavesEffect. Please try to remove it from li tags and let me know if that works for you. Also if you need to attach scrollspy to the window scroll please use mdbScrollSpyWindow instead of mdbScrollSpyElement.
Regards,
Arek
billel47 pro commented 6 years ago
Hello Arek,
thanks for your answer , I appreciate it .
I removed mdbWavesEffect from li elements and the errors are gone , but it seem not working , the scrollspy component or mdbScrollSpyLink changes anchor link (a) state by adding/removing active class rather the parent element (li).
so I put mdbScrollSpyLink on li element and it worked fine even with mdbWavesEffect directive.
Regards,
Bilal
Anshul Kumar commented 4 years ago
Not a single exaample is working guys. Not a single active link is changing from basic examples.
Arkadiusz Idzikowski staff commented 4 years ago
Please provide more information about the problem: your MDB Angular version, use code, and potential error messages.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.2.3
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: Yes
- Provided link: No