search

eddiemf / vue-scrollactive

Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.
MIT License
542 stars 70 forks source link

Throws Document Query Selector error if hash starts with Number and the webpage is hard refreshed with such hash in URL #105

Open ManasMadrecha opened 2 years ago

ManasMadrecha commented 2 years ago

Issue

Hi,

I am using Nuxt with its markdown Content module. I prefer to add numbering in my markdown's headings, so accordingly their IDs also start with number, e.g., 1-1-some-heading.

If I hard refresh some URL in my website that has such hash (e.g., https://example.com/link#1-1-some-heading), thenvue-scrollactive` throws an error of Document Query Selector. I guess it's because CSS selectors can't start with number.

However, if I use vue-scrollactive in my page's TOC with :modifyURL: false, and click on such headings that have ID starting with number, then no error is thrown. So, if I don't refresh the page, I can properly use this plugin.

The website breaks only if I refresh the page or directly go to the page, and only if the URL of the page has hash in it that starts with number.

Also, this causes a huge problem as I can't link to these headings in my other markdown, because then the URL will have such hash, and the website breaks.

Can this be resolved?

Problem with plugin

Without vue-scrollactive, the website doesn't break even if I the URL has hash starting with number, and I refresh it or go to it directly. So, the issue lies with the plugin.

ManasMadrecha commented 2 years ago

Recommended:

Use document.querySelector('[id="someid"]') instead of ('#someid')