js防止DIV布局滚动时闪动的解决方法

现在，我将为大家分享一下JS防止DIV布局滚动时闪动的解决方法。当我们使用DIV布局实现网站页面时，往往会遇到滚动时页面布局出现闪动的情况。这种情况一般是因为浏览器的滚动条宽度不同导致的，下面我将为大家介绍两种不同的解决方法，具体如下：

方法一：使用CSS样式

1.在CSS文件中加入以下样式：

html {
    overflow-y: scroll !important; //强制始终显示垂直滚动条
}

2.为了保持页面的整洁，我们不需要将此样式应用于整个页面，仅需要将其应用于需要固定布局的DIV即可。

示例：

<div style="overflow:scroll; height:100px;">
    //这里放置你的内容
</div>

方法二：使用JavaScript

1.我们需要通过JavaScript来检测浏览器滚动条的宽度，并对此做出相应的处理。

示例：

var ScrollbarWidth = (function() {
    var document_body = document.body,
        scrollElement=document.createElement('div'),
        scrollbarWidth;
    if(document_body){
        scrollElement.style.cssText +=' overflow:scroll;position:absolute;top:-99999px;width:50px;height:50px;';
        document_body.appendChild(scrollElement);
        scrollbarWidth = scrollElement.offsetWidth - scrollElement.clientWidth;
        document_body.removeChild(scrollElement);
    }
    return scrollbarWidth;
})();

//执行返回结果
console.log(ScrollbarWidth);

2.通过上述方法获得滚动条的宽度后，我们可以为需要固定布局的DIV设置相应的padding-right，以达到固定布局的效果。

示例：

var padding = "padding-right:" + ScrollbarWidth + "px;";
document.getElementById('fixed-layout-DIV').style.cssText += padding;

通过以上的方法，我们就可以轻松地实现JS防止DIV布局滚动时闪动的效果了。