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空白占据滚动条的位置