现在,我将为大家分享一下JS防止DIV布局滚动时闪动的解决方法。当我们使用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布局滚动时闪动的效果了。
沃梦达教程
本文标题为:js防止DIV布局滚动时闪动的解决方法
基础教程推荐
猜你喜欢
- 关于 sencha touch:ExtJS、SenchaTouch – FormPanel 无 2022-09-15
- Bootstrap组件系列之福利篇几款好用的组件(推荐) 2024-01-22
- jQuery实现首页悬浮框 2023-12-20
- js open() 与showModalDialog()方法使用介绍 2023-11-30
- Vue首页加载白屏原因以及10种解决方法汇总 2024-03-11
- JS获取几种URL地址的方法小结 2024-01-06
- 微信小程序 常见问题总结(4058,40013)及解决办法 2024-02-10
- Ajax上传文件进度条Codular 2023-02-01
- 禁止弹窗中蒙层底部页面跟随滚动的几种方法 2024-01-07
- CSS在UL LI的样式用法(UI上的应用) 2023-12-20