arnaudsm / raito

Mini Markdown Wiki/CMS in 8kb of JavaScript
https://raito.arnaud.at
MIT License
107 stars 13 forks source link

[bug?] invalid not so kind offset for reference links #49

Open mckaygerhard opened 10 months ago

mckaygerhard commented 10 months ago

The current anchor reference implementation at #42 forced to have a hardcoded CSS trick see the video how on any reference the title is "cuttring off" by the scroll

offseterror

i was thinking in made a workaroun around scrollIntoView using scrollTo that permits to specify an offset, using a config variable if user wants.. with a default value set, i can made a pull request for if you wants..

index 4deecda..d607c3d 100644
--- a/index.html
+++ b/index.html
@@ -11,8 +11,9 @@
 <!-- USER CONFIG -->
 <script>
        const config = {
                sitePath: "/",
                browserRouter: false,
+               scrollworkaround: true,
                name: "Raito",
                components: ["docs/navbar", "docs/github"],
                errorMessage: "Page not found",
@@ -415,9 +412,17 @@
                                                loadContent();
                                        };
                        });
-               if (selector) document.getElementById(selector).scrollIntoView()
-
+               if (selector) {
+                       offsettag = window.innerHeight / 8
+                       taganchor = document.getElementById(selector);
+                       taganchor.scrollIntoView({behavior: "smooth", block: "start", inline: "start", offset: offsettag})
+                       if(config.scrollworkaround) {
+                               const y = taganchor.offsetTop - (offsettag);
+                               window.scrollTo( { top: y, left: 0, behavior: 'smooth' } );
+                       };
+               };
                document.body.classList.add("loaded");
+               
                if (!config.browserRouter) window.location.replace(config.sitePath + path);
        };
mckaygerhard commented 10 months ago

@arnaudsm i forgotten.. this is happened due the navbar.. so the calculated space must be the same as the navbar.. so window.innerHeight / 8 is just an example but must be the space reserved by the navbar (container id padding)

i dont have an agnostic compatible way or idea how to solve this.. cos always will depend of the current style of the navbar of components included..

arnaudsm commented 10 months ago

That makes sense, but I would prefer a scroll offset parameter in pixels, to make it more customisable

mckaygerhard commented 10 months ago

That makes sense, but I would prefer a scroll offset parameter in pixels, to make it more customisable

yeah i was talking about something auto detected.. but seems it could not be possible.. because we cannot guess the pixeled navbar from the JavaScript code.. unless we injected from JavaScript

mckaygerhard commented 7 months ago

after many months .. i dont have the skills for this bug.. do you find some solution? @arnaudsm ?

arnaudsm commented 6 months ago

Sorry I'm fairly busy, will revisit soon !