Eleminate "jump" when navigating from page without scrollbar to page with scrollbar?

[haley-exe]

When navigating between pages that do and do not have a scrollbar on the side, there's a noticeable "jump" when the page loads (e.g. when going from "Home" to "Portfolio" on http://dev.haleycampbell.net).

Any thoughts on how to resolve this? FWIW, I am a complete novice at Grav, CMSs, and coding in general, so my apologies if I need to ask for clarification!

[MATsxm]

Thanks for your post... I guess I undersatnd what you are talking about but sadly, I would say that there's no solution as it depends the way the browser is reading your site.

If your content is one screen height (depends also your resolution and device), the broswer won't add the scrollbar as it is not a need and if your content is more than one screen height, it will be added.

This is the normal way, the browser will read your site.

[haley-exe]

Hmm, that IS frustrating, since I do plan to create content that is more than 1 page height (which I am also struggling with... it seems that the way the theme is read, any content more than 1 page height is cut off). I know that for many one-page themes, there's a fixed background and scrolling is accomplished without a scrollbar. Would there be a way for me to add or modify code somewhere so I can implement that with Tintamarre?

[MATsxm]

yup, but it's not a theme structured as a one-page
playing with mod_ would be afix, but this is not the "philosophy" of this theme

[haley-exe]

Fascinating. From what I've read on the Grav documentation page, the file structure for this theme is much more similar to a one-page theme than a regular Grav theme, yes?

In any event, thank you for giving me a place to start. I will look into mod_ to see if there is anything I can do to fix this issue, but I would love any other ideas you have as well!

[haley-exe]

Solution found! A friend pointed me here:

https://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/

and added overflow-y: scroll; to the html block at top of the tintamarre.css file. That's fixed the "jump" issue!