Bootstrap 禁用滚动条

时间:2024-03-03 12:50:48

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