Member Avatar for Jen S

I too am new to web development and have just read the recent post regarding this problem which is exactly the same as I am experiencing. I have added the following to my style sheet but obviously doing something wrong as hasn't fixed it. Any pointers would be very greatly appreciated.

.html {
overflow: scroll;
}

My website is

  • 4 Contributors
  • 10 Replies
  • 89 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

This kind of jump is almost always caused by the vertical scrollbar appearing on some pages but not others. When a page needs a scrollbar the browser subtracts the scrollbar width from the content area, so a centered layout will shift a few pixels. In this thread noted the jump after adding a page, confirmed it was not browser-specific, reminded everyone that overflow only acts when there is overflow, and found the stylesheet selector was targeting a class rather than the html element, so the rule never applied.

A pragmatic fix is to reserve the vertical-scroll space on every page so the width stays constant. One common approach is to force the vertical scrollbar on the root element:

html { overflow-y: scroll; }

This keeps layouts stable. See the spec notes for overflow-y on MDN: overflow-y documentation.

If forcing a scrollbar is undesirable, consider the modern scrollbar-gutter property to reserve space without always showing a scrollbar (see scrollbar-gutter documentation). Also check for elements causing horizontal overflow (images or containers wider than the viewport). A quick console test document.documentElement.scrollWidth > window.innerWidth flags pages that are wider than the viewport; use DevTools to locate and fix the offending element. Finally, avoid naming classes the same as tags (for example a class named "html") to prevent selector confusion, as suggested.

Recommended Answers

All 10 Replies

Member Avatar for Kraai

I viewed your site in Firefox, IE7, and Chrome, and do not see a sideways scrolling problem. It seems to be perfectly in the center of my screen. What browser do you see this problem in?

Member Avatar for Jen S

I am using Firefox 3.16.13

Member Avatar for Arkinder

Give the elements a width and height.

Regards, Arkinder

Member Avatar for Jen S

Hello, thanks for all your comments. This problem only occurred recently when I added a new page 'In the press'. I started adding this item into the main menu bar and once I did, I noticed the pages jumping. I hadn't added any more content to the existing pages so the scroll bars on the more populated pages already existed. Given that, I'm not sure about giving the elements width and height. Many thanks again. Jenny.

Member Avatar for Arkinder

The entire purpose of the overflow property is to accomodate overflow. If there is no overflow, then the property will do nothing.

Regards, Arkinder

Member Avatar for Jen S

Hi Arkinder,
Thanks for your note. Am a little confused as you may well have guessed. I have put the overflow code in my style sheet but doesn't seem to make a difference. Have I done this incorrectly? As mentioned before, I didn't have this problem until I added a new page just recently. Prior to that, I didn't have any of the jumping even though a number of the pages had scroll bars so I don't know what has changed.
Many thanks for your patience and kind regards,

Jenny.

Member Avatar for teedoff

It looks like from your original post that you have a period in fron of html. Is this the case? Do you have a class of .html in your html somewhere? Either way the desired affect you are wanting will not be achieved with .html {overflow: scroll;}

Remove the period to cause every page to have a scroll bar regardless of how much vertical content is in it.

Member Avatar for Jen S

Dear teedoff,
You are truly fabulous. I can't tell you how much I appreciate your help. I have spent ages trying to work this out and was something as simple as removing the period. Thank you so much and kind regards, Jenny

Member Avatar for Arkinder

That's rather funny. There are elements with a class of html in the code, so I never bothered suggesting that or understood the question haha.


Regards, Arkinder

Edited by Arkinder because: n/a
Member Avatar for teedoff

I never looked at the code lol but if you do have classes of .html, I recommend changing them. Gets confusing, at least to me, when you use id's and classes the same name as tags, case in point....lol

Either way I knew that to do what you were saying, then you needed to style the html TAG rather than any id or class of html.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.