Scrollspy

dctec_ml pro premium priority asked 5 months ago

I have copied the example of the scrollspy and it does not work. I also do not get no error. [...] const scrollSpy = new mdb.ScrollSpy(document.body, { target: '#scrollspy1' }) }


Dawid Wajszczuk staff commented 5 months ago

Hi. Can you provide a snippet with this issue https://mdbootstrap.com/snippets/? Do you inject srollspy after the page has loaded?


dctec_ml pro premium priority commented 5 months ago

https://mdbootstrap.com/snippets/standard/dctec_ml/3685441

what do you mean with: "Do you inject srollspy after the page has loaded?"

EDIT: document.addEventListener('DOMContentLoaded', (e) => { const scrollSpy = new mdb.ScrollSpy(document.body, { target: '#scrollspy1' })
});
don't work


Dawid Wajszczuk staff commented 4 months ago

I can't open your snippet (maybe you forgot to click publish). What I mean is that maybe you add this scrollspy to your page via AJAX call or something like this. Normally it doesn't require any JS code to be initialized. Here is the example with just HTML https://mdbootstrap.com/docs/standard/navigation/scrollspy/#section-basic-example. It works fine without JS.


dctec_ml pro premium priority commented 4 months ago

It should now be public The Problem is, i have an RazorPage and I'm not able to put it on body. I have to put it on body afterwards


Dawid Wajszczuk staff answered 4 months ago

Hi,

You forgot to add data-mdb-spy="scroll" and data-mdb-target="#scrollspy1" attributes which are necessary. Usually they are added to the body. Here is the snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3691879. Check if your site will work with these changes and let me know.

Keep coding,
Dawid


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags