Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
261 views
in Technique[技术] by (71.8m points)

javascript - Scrollbar shifts content

I have: I have several web pages both with this outline:

<body>
<div id="container">
CONTENT
</div>
</body>

with the CSS:

body{
color:#000000;
background-color:#FFFFFF;
background-image: url(background.jpg);
background-repeat: repeat-x;
font-family: verdana;
letter-spacing: 1px;
}
#container{
margin-left:auto;
margin-right:auto;
margin-top:5px;
width: 700px;
}

Problem: All pages are short so that no scroll bar shows up, but one page is longer so a vertical scroll bar on the right shows up. This second page causes the container to be shifted (to the left) just a bit.

From what I understand a common solution is to make the scrollbar show up on all pages, but I really want to avoid that since it is just one page out of many.

Question: Is there a way to avoid shifting the container while still having it centered without making the scrollbar show up on all pages?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

People with large monitors will never see a scrollbar on any page.

People with small monitors will always see scrollbars on all pages.

Despite monitor size, people are free to make any browser window any size and cause scrollbars.

Oh and let's not forget about people that like to add a dozen browser toolbar addons making the browser window's content area half as high as it could be.

That's just how it is and no static solution is going to get around that. Changing the margin on one page is not a solution for reasons listed above.

If you insist on fixing something people have learned to live with, it's going to have to be a "dynamic" JavaScript solution where you calculate your left margin and add the width of the scrollbar. For different browsers, bars are different widths so you will have to calculate this too.

Edit: Like someone said in another answer, this is default browser behavior and should be left alone.

Edit2: As user dampe said in comments, you'll also have to trigger the JavaScript after each time the window is resized by the user.

This is going to be an epic waste of your time. Typically, default behavior of the browser is left to the browser. Way too many variables to account for and you're bound to miss something if you don't have every scenario, skin, OS, browser version, browser brand, toolbar add-on, monitor type, size, etc. to be testing with. Once you start getting this working, you'll find you need to make exceptions and corrections for Explorer. Before you know it, you end up with a massive piece of bloat... and for what? What's the value of this?

Starting point: 100% guaranteed expected behavior in all browsers & situations.

Ending point: guaranteed looking great in your monitor/system only... you take a risk that it will look like junk on a system/scenario you haven't even thought about.

Search for a pre-made JavaScript solution or a jQuery plugin first... if you can't find one, ask yourself why?

  • not practical
  • not possible
  • not worth the trouble (low demand)

Edit3: I did some searching to satisfy my curiosity. I found a thread with a jQuery solution as well as links to methods for calculating the scrollbar width.

IMHO, this is a waste of time and resources but here's the link for anyone interested...

http://expressionengine.com/archived_forums/viewthread/158703/

Edit4: Here's a CSS solution that I found. I have not tested this but if it works it would be sweet.

html {
    overflow-y: scroll;
}

http://haslayout.net/css-tuts/Fixing-Page-Shift-Problem

Edit5: CSS solution works but not to my liking. It creates scrollbars for every page yet when not needed they are grayed out or empty... not elegant.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...