防止滚动条增加到 Chrome 上的页面宽度 [英] Prevent scroll-bar from adding-up to the Width of page on Chrome

问题描述

我在尝试在 Chrome 上保持 .html 页面的宽度一致时遇到了一个小问题，例如，我有一个页面 (1)，其中包含大量超出视口(正确的词?)高度的内容，因此该页面 (1) 上有一个垂直滚动条.在第 (2) 页上，我有相同的布局(菜单、div 等)但内容较少，因此那里没有垂直滚动条.

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.

推荐答案

您可以获取滚动条的大小，然后对容器应用边距.

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'});
    }
}

用于移除 h 滚动条的 CSS:

CSS for remove the h-scrollbar:

body{
    overflow-x:hidden;
}

试着看看这个:http://jsfiddle.net/NQAzt/

这篇关于防止滚动条增加到 Chrome 上的页面宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！