Bootstrap 禁用滚动条
Bootstrap中禁用滚动条的方法
逻辑:
当点击弹窗按钮后,js会为body元素添加一个modal-open的类,该类主要内容如下
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }
说明:modal-open使用在body上,modal是弹出框最外层DIV上的样式
该类起到禁用滚动条的作用,同时为了保证界面不会因为滚动条的消失而发生变化(默认的滚动条17个像素,滚动条消失时,width:100%的元素会把这17个像素沾满,造成排版的变化),body元素的style中加入的padding-right:17px;
原理:
body中所有元素超出屏幕的部分隐藏 overflow: hidden; 上面的代码分别起到了禁用x轴和y轴滚动条的作用,同时用17px空白占据滚动条的位置
如果你觉得本文对您有帮助,可以留言或点赞哦!
>>留于文后
如果您发现文中存在错误,欢迎留言指出,提前感谢!
------------------------------------------------------------------------------------------------------------------------------------
本文来自博客:http://www.cnblogs.com/caoruiy/
------------------------------------------------------------------------------------------------------------------------------------
特别说明:本人博客迁移到独立博客站点:http://www.plcent.com/
转载请注明出处, 以防有错误, 方便后来者追根溯源!做一个有爱的搬运工O(∩_∩)O哈哈~
请勿用于商业用途!
>>留于文后
如果您发现文中存在错误,欢迎留言指出,提前感谢!
------------------------------------------------------------------------------------------------------------------------------------
本文来自博客:http://www.cnblogs.com/caoruiy/
------------------------------------------------------------------------------------------------------------------------------------
特别说明:本人博客迁移到独立博客站点:http://www.plcent.com/
转载请注明出处, 以防有错误, 方便后来者追根溯源!做一个有爱的搬运工O(∩_∩)O哈哈~
请勿用于商业用途!