码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap 禁用滚动条

时间:2015-06-23 23:11:11      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:

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

 

Bootstrap 禁用滚动条

标签:

原文地址:http://www.cnblogs.com/caoruiy/p/4596471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!