Topic: Scrollspy - mdbScrollspyLink attribute binding not working
Dear support,
I'm having issue with scrollspy. Attribute binding for mdbScrollspyLink is not working. I am using scrollspy for fixed elements and for dynamically created elements. Here is code example:
<div id="scrollspy">
<ul mdbScrollspy="tocScrollspy" class="nav flex-column menu-sidebar">
<!-- Release Info -->
<li class="nav-item">
<a class="nav-link toc-link" mdbScrollspyLink="releaseInfo">{{'SOFTWARE.SOFTWARE_RELEASES.RELEASE_INFO.HEADER' | translate}}</a>
</li>
<!-- Downloads -->
<li class="nav-item">
<a class="nav-link toc-link" mdbScrollspyLink="downloads">{{'SOFTWARE.SOFTWARE_RELEASES.DOWNLOADS.HEADER' | translate}}</a>
</li>
<!-- What's New (features) -->
<li class="nav-item">
<a class="nav-link toc-link" mdbScrollspyLink="whatsNew">{{'SOFTWARE.SOFTWARE_RELEASES.FEATURES.HEADER' | translate}}</a>
<ul mdbScrollspy="featuresScrollspy" class="nav flex-column ps-3" *ngIf="selectedProductReleaseDetails!.productFeatures!.length > 0">
<li class="nav-item" *ngFor="let feature of selectedProductReleaseDetails!.productFeatures">
<a class="nav-link toc-link" [mdbScrollspyLink]="feature.id">{{feature.title}}</a>
</li>
</ul>
</li>
<!-- Bug & Issue Fixes -->
<li class="nav-item">
<a class="nav-link toc-link" mdbScrollspyLink="bugIssueFixesSection">{{'SOFTWARE.SOFTWARE_RELEASES.BUG_AND_ISSUE_FIXES.HEADER' | translate}}</a>
</li>
<!-- Migration -->
<li class="nav-item">
<a class="nav-link toc-link" mdbScrollspyLink="migration">{{'SOFTWARE.SOFTWARE_RELEASES.PREREQUISITES.HEADER' | translate}}</a>
</li>
<!-- Prerequisites -->
<li class="nav-item">
<a class="nav-link toc-link" mdbScrollspyLink="prerequisites">{{'SOFTWARE.SOFTWARE_RELEASES.PREREQUISITES.HEADER' | translate}}</a>
</li>
<!-- Compatibility -->
<li class="nav-item">
<a class="nav-link toc-link" mdbScrollspyLink="compatibility">{{'SOFTWARE.SOFTWARE_RELEASES.COMPATIBILITY.HEADER' | translate}}</a>
</li>
<!-- 3rd Party Hotfixes -->
<li class="nav-item">
<a class="nav-link toc-link" mdbScrollspyLink="thirdPartyHotfixes">{{'SOFTWARE.SOFTWARE_RELEASES.3RD_PARTY_HOTFIXES.HEADER' | translate}}</a>
</li>
</ul>
</div>
If I inspect html in the browser, mdbScrollspyLink attribute is missing. I already check, genearted feature.id is valid (e.g. feature_1). Is this supported? How to solve this?
Also, I am getting a lot of errors in the console: - Cannot read properties of null (reading 'scrollTop') - Cannot read properties of null (reading 'style')
What is the cause if this issues?
Best regards, Novak
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 5.0.0
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Rafał Seifert commented 12 months ago
Have you tried copying our basic example from docs and implementing your code on top of it? Do you have all necessary imports? If this does not help please edit your request and provide the rest of the code because you have supplied us with only part of scrollspy implementation and we can not recreate the problem.