Tho*_*mas 9 html javascript css scrollbar centering
我有:我有几个网页都有这个大纲:
<body>
<div id="container">
CONTENT
</div>
</body>
使用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;
}
问题:所有页面都很短,因此没有滚动条显示,但是一页较长,因此右侧的垂直滚动条显示出来.第二页使容器稍微移位(向左).
根据我的理解,一个常见的解决方案是让滚动条显示在所有页面上,但我真的想避免这种情况,因为它只是一页中的一页.
问题:有没有办法避免在没有让滚动条显示在所有页面上的同时使容器移动而移动容器？
Dam*_*amb 10
我不知道纯CSS解决方案,但你可以使用javascript动态计算和调整左边距的正确宽度(同时使右边距更小 - 按滚动条的大小).
BTW:IMO:解决这个问题的正确方法是:保持原样.因为这是默认行为,我不认为用户会像你一样担心这个问题.这是我的观点,有人可能有不同的,但为每个页面添加滚动条(解决此问题)是史诗般的失败.:)
Spa*_*rky 10
拥有大型显示器的人永远不会在任何页面上看到滚动条.
拥有小型显示器的人将始终在所有页面上看到滚动条.
尽管监视器大小,人们可以自由地制作任何大小的浏览器窗口并导致滚动条.
哦,让我们不要忘记那些喜欢添加十几个浏览器工具栏插件的人,使浏览器窗口的内容区域尽可能高.
这就是它的原因,没有任何静态解决方案可以解决这个问题.由于上面列出的原因,更改一页上的边距不是解决方案.
如果你坚持要修复人们已经学会使用的东西,那么它必须是一个"动态"的JavaScript解决方案,你可以计算左边距并添加滚动条的宽度.对于不同的浏览器,条形宽度不同,因此您也必须计算它.
编辑: 就像有人在另一个答案中说的那样,这是默认的浏览器行为,应该保持不变.
Edit2: 正如用户在评论中所说,在每次用户调整窗口大小后,您还必须触发JavaScript.
这将是一个史诗般的浪费你的时间.通常,浏览器的默认行为留给浏览器.如果你没有每个场景,皮肤,操作系统,浏览器版本,浏览器品牌,工具栏附加组件,显示器类型,尺寸等等,那么你需要考虑太多的变量而且你必须要错过一些东西. .一旦开始使用,您将发现需要为Explorer进行例外和更正.在你知道它之前,你最终会得到一大块膨胀......为了什么？这有什么价值？
起点: 100%保证在所有浏览器和情境中的预期行为.
结束点: 保证在您的显示器/系统中看起来很棒...您冒险在您甚至没想过的系统/场景中看起来像垃圾.
首先搜索预制的JavaScript解决方案或jQuery插件...如果找不到,请问问自己为什么？
编辑3: 我做了一些搜索以满足我的好奇心.我找到了一个带有jQuery解决方案的线程,以及指向计算滚动条宽度的方法的链接.
恕我直言,这是浪费时间和资源,但这里是任何感兴趣的人的链接......
http://expressionengine.com/archived_forums/viewthread/158703/
Edit4: 这是我找到的CSS解决方案.我没有对此进行过测试,但如果有效则会很好.
html {
overflow-y: scroll;
}
http://haslayout.net/css-tuts/Fixing-Page-Shift-Problem
Edit5: CSS解决方案有效但不符合我的喜好.它为每个页面创建滚动条,但在不需要时,它们会变灰或变空......不优雅.