防止Chrome浏览器中的滚动条从页面宽度累计到宽度 [英] Prevent scroll-bar from adding-up to the Width of page on Chrome
问题描述
我有一个小问题,试图使我的.html页面在Chrome上保持一致的宽度
例如,我有一个页面(1)有大量的内容溢出视口(右键?)高度,因此在该页面上有一个垂直滚动条(1)。在第(2)页我有相同的布局(菜单,divs,...等),但内容较少,所以没有垂直滚动条。
I have a small issue trying to keep my .html pages at a consistent width on Chrome, For example I have a page (1) with lots of contents that overflows the viewport's (right word?) height, so there's a vertical scroll-bar on that page (1). On page (2) i have the same layout (menus, divs,...etc) but less content, so no vertical scroll-bars in there.
在页面(1)上,滚动条似乎将元素稍微向左推(加到宽度?),而一切都显示在页面(2)的中心
The problem is that on page (1) the scroll-bars seem to push elements slightly to the left (adding-up to the width?) while everything appears well centered on page (2)
我还是一个HTML / CSS / JS的初学者,我相信这不是那么困难,但我没有运气找出解决方案。它在IE10上正常工作,FireFox(非干扰滚动条),我只在Chrome上遇到过。
I'm still a beginner on HTML/CSS/JS, and I'm fairly convinced that this isn't so difficult, but i had no luck figuring out the solution. It does work as intended on IE10, and FireFox (non-interfering scroll-bars), I only encountered this on Chrome.
感谢您的帮助!
推荐答案
您可以获取滚动条大小,然后对容器应用margin。
You can get the scrollbar size and then apply a margin to the container.
这样的东西:
var checkScrollBars = function(){
var b = $('body');
var normalw = 0;
var scrollw = 0;
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
}
CSS用于删除h滚动条:
CSS for remove the h-scrollbar:
body{
overflow-x:hidden;
}
尝试看看这个:
http://jsfiddle.net/NQAzt/
这篇关于防止Chrome浏览器中的滚动条从页面宽度累计到宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!