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

时间: 2024-08-03 12:30:11

Bootstrap 禁用滚动条的相关文章

Bootstrap禁用响应式布局

在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局. 移除标签 禁用第一步,就是需要移除在head标签中添加的 <meta name="viewport" content="width=dev

禁用滚动条

请注意,写在body里 <body scoll=no> 全禁止 <body style="overflow:scroll;overflow-y:hidden"> 禁止纵向滚动条 <body style="overflow:scroll;overflow-x:hidden"> 禁止横向滚动条 overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容 overflow: auto; 在需要时内容会自动添加滚动条

Bootstrap历练实例:禁用的按钮

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap历练实例:禁用的按钮</title> <meta charset="utf-8" /> <meta name="viewp

bootstrap的下拉菜单

本文章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 1.将下拉菜单触发器和下拉菜单都包裹在 放在class.dropdown 里,或者另一个声明了 position: relative; 的元素. 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me

JS常用方法【私房菜-笔记】-持续整理中

//记录一下前端开发中 JS常用的方法等,持续收集整理中 ---------------------------------------------------------- 1 //处理键盘事件 禁止后退键(Backspace)密码或单行.多行文本框除外 2 function banBackSpace(e) { 3 var ev = e || window.event;//获取event对象 4 var obj = ev.target || ev.srcElement;//获取事件源 5 va

bootstrap3教程

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目. Bootstrap CSS 概览 Bootstrap 被支持的浏

aardio窗体相关

import win.ui.minmax; win.ui.minmax(winform) winform.hitmax() 最大化,默认最大化就会还原 winform.close() 关闭窗口 一.创建简单的WEB窗口(winform)1.1点击新建WEB窗体即可创建WEB浏览器,默认代码如下: //创建web窗体 var wb = web.form( winform ,//可输入_UIFLAG_ 前缀的常量自定义外观 ,//可输入_DLCTL_ 前缀的常量以控制下载行为 ,//"USER AG

ScrollView图片分页显示-简单

用到的控件: 1>UIScrollView:宽度和图片的宽度一样,因为分页的代码就一句 // 设置分页,这个分页的原理实际上是按照ScrollView的宽进行分页的,这里的图片的宽由于和ScrollView的宽式一样的所以刚好分页显示图片了 _scrollView.pagingEnabled = YES; 2>UIImageView:用来放图片的 3>UIPageControl,页码显示控件 ======================= 关键部分:监听ScrollView的滚动,来告诉

iScroll小计

iScroll版本 iScoll.js     常规版本. iscoll-lite.js     精简版.不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定.如果你需要的是滚动(特别是在移动平台)这个个又小又快的解决方案. iscroll-zoom.js     在标准滚动功能上增加缩放功能. iscroll-infinite.js     可以做无限缓存的滚动. 入门 1. 尽可能保持DOM结构的简洁. 最佳HTML结构如下: <div id="wrapper"> <ul