下图是两者官方示例的简单对比： 本文就是介绍如何使用 mCustomScrollbar 这个插件，大部分的内容是翻译自 mCustomScrollbar 官方的介绍页面，但是根据自己的理解做了部分的调整和修改...关于 mCustomScrollbar mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件，它可以让你灵活的通过 CSS 定义网页的滚动条，并且垂直和水平两个方向的滚动条都可以定义...我还用了window load ((window).load()) 来激活我的插件功能，因为这样，就可以保证在页面对象全部加载完成之后，加载我的插件。...set_width:false：设置你内容的宽度 值可以是像素或者百分比 set_height:false：设置你内容的高度 值可以是像素或者百分比 horizontalScroll:Boolean：是否创建一个水平滚动条...然后再使用 CSS 定义滚动条的样式，使用 Javascript 相应鼠标的滚动事件，产生滚动下滑的效果。 明白了这点，下面我们就可以看一下滚动条的结构，然后使用 CSS 对其进行定义了。
; 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度)(其他浏览器)： document.body.scrollLeft; 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度)(ie浏览器)：...) ：$(document).scrollTop(); 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度)：$(document).scrollLeft(); 获取或设置元素的宽度：$(obj)....： screenY： 鼠标相对于显示器屏幕左上角的偏移 pageY： 鼠标相对于页面左上角的偏移 (其值会受滚动条的影响，相当于整个文档，整个页面的Y的值)...IE9之下并不支持这个属性 clientY： 鼠标相对于浏览器窗口左上角的偏移（其值不会受滚动条影响，相对于滚动条当前的位置的浏览窗口的Y值） 注意clientY和pageY...的区别，pageY在页面无滚动条或滚动条下拉0的情况下值等同于clientY event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 layerY：
clientX 返回当事件被触发时，鼠标指针的水平坐标。 clientY 返回当事件被触发时，鼠标指针的垂直坐标。 ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。...screenX 返回当某个事件被触发时，鼠标指针的水平坐标。 screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。 shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。...size 设置页面的方向和尺寸 widows 设置段落必须留到页面顶部的最小行数 Scrollbar 属性 (IE-only) 属性 描述 scrollbar3dLightColor 设置箭头和滚动条左侧和顶边的颜色...scrollbarFaceColor 设置滚动条的表色 scrollbarHighlightColor 设置箭头和滚动条左侧和顶边的颜色，以及滚动条的背景 scrollbarShadowColor 设置箭头和滚动条右侧和底边的颜色...textTransform 对文本设置大写效果 unicodeBidi whiteSpace 设置如何设置文本中的折行和空白符 wordSpacing 设置文本中的词间距 Table对象 Table
隐藏） cursoropacitymax - 改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0，默 认值是1（完全不透明） cursorwidth - 像素光标的宽度...，双击对话框（默认：true） gesturezoom - （仅当boxzoom =真实，使用触摸设备）上缩放框激活时，间距输出/输入（默认：true） grabcursorenabled，显示“抢...”图标的div touchbehavior = true时，（默认：true） autohidemode，如何隐藏滚动条的作品，真=默认/“光标”=只进游标隐藏/ false =不隐藏背景，CSS改变轨道的背景下...disableoutline，对于chrome浏览器，停用大纲（橙色hightlight）选择具有nicescroll一个div（默认： true）时， horizrailenabled，nicescroll可以管理水平滚动...（默认：true） railalign，取向垂直导轨（defaul：“右”） railvalign，对齐水平导轨（defaul：“底部”） enabletranslate3d，nicescroll
CSS第五天-定位 静态定位：static 定位的默认值，写边偏移也不会有效果 ---- 相对定位：relative 父元素搭配子绝父相使用 根据自身原来的位置，进行定位 没有脱标，在页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位：absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流，在页面不占有位置 绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度...---- 固定定位：fixed 永远根据浏览器可视区域定位，不会随着滚动条的滚动而滚动 可以直接加宽高，默认宽度是内容宽度 脱离标准流，在页面不占有位置 解决分辨率问题有两种方法… ---- 定位层级...： 文字、行内元素、行内块元素 === 给其父元素添加text-align: center 块级元素 === 给当前元素设置 宽度和margin: 0 auto 浮动元素 === 给外面标准流的父元素设置...0 ---- 文字阴影: text-shadow 给文字添加阴影效果 h-shadow 水平偏移量，允许负值 v-shadow 垂直偏移量，允许负值 blur 模糊度 /// color 阴影颜色 -
2 page坐标系 坐标原点：整个页面的左上角(整个页面的意思就是你整个网页的全部，按照整个html文档的长度和宽度来计算)。...pageX：鼠标点击位置相对于网页左上角的水平偏移量，也就是 clientX + 水平滚动条滚动的距离。...page坐标的最大范围是 (document.body.clientWidth + 垂直滚动条宽度, document.body.clientHeight + 水平滚动条高度)。...clientX：鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)。 clientY：鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动的距离)。...client坐标的最大范围是 (window.innerWidth - 垂直滚动条宽度, window.innerHeight - 水平滚动条高度)。
溢出(重点) 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。...更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究) 表单轮廓等。 防止表单域拖拽 2.1 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。...属性值 描述 default 小白 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止 鼠标放我身上查看效果哦： <li style="cursor...为什么需要使用精灵图技术： 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。...负边距+定位：水平垂直居中 咱们前面讲过， 一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。 2).
，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高，包含内边距，但不包括水平滚动条、边框和外边距。...当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。 8.Window.scrollX 返回文档/页面水平方向滚动的像素值。...，不管浏览器窗口大小如何变化，都不会影响点击位置的坐标。...4.pageX和pageY 顾名思义，该属性是事件发生时鼠标点击位置相对于页面的位置，通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的，但是当浏览器出现滚动条的时候...，pageX通常会大于clientX，因为页面还存在被卷起来的部分的宽度和高度，如下所示： 由于浏览器出现了垂直和水平的滚动条，所以pageX和pageY大于clientX和clientY。
鼠标事件对象MouseEvent下的属性 [a]. evt.pageX/Y ：以页面左上角为参考点，表示当前触发点离页面左上角的水平和垂直距离。 注意：1....HTMLElement.clientLeft/Top ：元素左border的宽度和上border的高度。 2. ...HTMLElement.clientWidth/Height ：元素content+padding-滚动条的宽度或高度。 3. ...HTMLElement.scrollLeft/Top ：元素水平、垂直滚动条切去的宽度或高度。...注意：FF在W3C标准模式下,document.documentElement.scrollLeft/Top获取页面滚动条切去的部分;W3C怪异模式下，则采用body.scrollLeft/Top来获取
溢出(重点) 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。...更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究) 表单轮廓等。 防止表单域拖拽 2.1 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。...属性值 描述 default 小白 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止 鼠标放我身上查看效果哦： 水平垂直居中 咱们前面讲过， 一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。 2). 压住盒子相邻边框 ?...我们用css 边框可以模拟三角效果 宽度高度为0 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了 为了照顾兼容性 低版本的浏览器，加上 font-size
function dragLine(e) { let isResize = false // 鼠标指针向对于浏览器页面...MouseEvent属性 说明 实例值 clientX、clientY 设置或获取鼠标指针位置相对于窗口客户区域的 X、Y 坐标（不包括滚动条） 106+3+300-5+2=406 offsetX、offsetY...设置或获取鼠标指针位置相对于触发事件的对象的X、Y坐标 2 pageX、pageY （只读）相对于整个文档的X、Y坐标以像素为单位的只读属性（包括滚动条） 74+106+3+300-5+2=480 screenX...这个接口描述了所有相同种类的元素所普遍具有的方法和属性。 这些继承自Element并且增加了一些额外功能的接口描述了具体的行为....0（内部无滚动条） - clientHeight：可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算 - scrollHeight：返回整数，如果需要小数使用
rAF通过优化动画效果的渲染，可以避免卡顿和过度绘制的问题。此外，还有其他滚动方案如CSS动画、滚动事件监听等等，开发人员可以根据具体需求选择合适的方案。...通过使用window对象的innerWidth和innerHeight属性，我们可以获取窗口的宽度和高度。...根据标准，我们可以通过元素的scrollLeft和scrollTop属性来获取其当前水平和垂直滚动的像素位置。对于整个页面，我们可以使用document.documentElement的这两个属性。...如果它增加了（滚动条消失后），那么我们可以在 document.body 中滚动条原来的位置处通过添加 padding，来替代滚动条，这样这个问题就解决了。保持了滚动条冻结前后文档内容宽度相同。...亦或是参考这篇文章：css - 如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题？
，包括滚动条和边框。...如下图： image.png 可以看出，假如元素在页面滚动条的拖动下向上移动，则元素的 top 会是负值。...ev.clientX/ev.clientY： 事件发生时，鼠标点击位置相对于浏览器可视区（不包括滚动条和工具栏）左上角（该点为原点）的坐标。...ev.pageX/ev.pageY 事件发生时，鼠标点击位置相对于页面左上角（该点为原点）的坐标。...scrollLeft()/scrollTop()： 水平方向上或者垂直方向上，滑块相对于整个滚动条的位置。对于某个元素，滑块处于初始位置或者无滚动条时，该方法返回 0。
注意在使用位置计算api时要格外的小心，不合理的使用他们可能会造成布局抖动Layout Thrashing影响页面渲染。 scroll 首先我们先来看看scroll相关的属性和方法。...根据不同的值对应可以控制滚动条的位置。 其实这两个属性和上方的Element.scroll()可以达到相同的效果。...例如，不论页面是否有垂直/水平滚动，当你点击客户端区域的左上角时，鼠标事件的 clientX/Y 值都将为 0 。...如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。...而offsetWidth/offsetHeight返回元素的布局宽度/高度，包含元素的边框(border)、水平线/垂直线上的内边距(padding)、竖直/水平方向滚动条(scrollbar)（如果存在的话
强烈推介IDEA2020.2破解激活，IntelliJ IDEA 注册码，2020.2 IDEA 激活码 今天要写的是CSS布局—盒子模型 首先说一下CSS的整体布局： 它包括容器(container)...具体图下图所示： ㈠概念与组成 1.页面上区域，图片，导航，列表，段落都可以是盒子。 2.页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。...2.取值：px，%(外层盒子的宽度和高度) ㈤margin的缩写 margin每个方向分量的值设定是如何省略的呢？...如下图所示： ㈦margin属性设置水平居中 ⑴图片，文字水平居中：text-align：center； ⑵div水平居中：margin：0 auto；浏览器自动计算 其中，0设置的是上侧和下侧的值，...由于图片和边框之间需要一定的空白距离，把padding属性设置一下，四个方向上都是5个像素，这样图像框就做好了。 ⑶如何去掉这个空白距离？如图所示： 以上就是盒子模型相关知识，希望可以有所帮助。
掌握常用的CSS属性不仅可以使你的网页看起来更美观，还能提升用户体验，今天小编为大家介绍8个常见的CSS小技巧： 1.修改滚动条样式 下图是我们常见的滚动条，现在需要改变滚动条的宽度和颜色了，并把它画的圆一点...（常见的滚动条） 可以用::-webkit-scrollbar来实现： /*设置滚动条的宽度*/ ::-webkit-scrollbar{ width: 10px; } /*将轨道改为蓝色...） 2.修改光标停留在页面上的样式 一般情况下鼠标的样式是一个箭头，改变鼠标光标的样式为其他类型： /*类为first的元素，设置鼠标为不可用状态 。...（显示效果） 4.页面平滑的滚动 通过代码实现平滑地从一个页面跳转到另一个页面： 和色调旋转图像（右） 点击此页面了解更多关于筛选的详细信息。
可视宽高 clientHeight ：元素的可视高度（包括内边距，不包括边框、外边距或滚动条） clientWidth ：元素的可视宽度（包括内边距，不包括边框、外边距或滚动条） 自身宽高 offsetHeight...：元素的高度（包括边框和内边距，不包括外边距） offsetWidth ：元素的宽度（包括边框和内边距，不包括外边距） 偏移值 offsetLeft ：元素的相对水平偏移位置（左边界距离可视区域最左侧的距离...） scrollWidth ：元素的整个宽度（包括带滚动条的隐蔽的地方） 鼠标滚动距离 scrollLeft ：是该元素的显示（可见）的内容上边与该元素实际的内容的距离（滚动条滚去的宽度） scrollTop...鼠标相对于页面的位置 event.pageX ：鼠标相对于页面左边缘的距离。 event.pageY ：鼠标相对于页面上边缘的距离。...() ：获得包括内边距(padding)和边框(border)的元素宽度 outerWidth(true) ：获得整个元素的宽度，包括外边距、边框、内边距和内容 outerHeight(true) ：获得整个元素的高度
Loaded：当窗体包含的页面组件首次从内存中调入后，自动调用该方法来初始化页面组件 SelectNextPage：指定当前页的前一页或下一页 UpdateActivePage：当Pages...可指定当用户标题时是否将发生OnColumnClick事件 Columns：对列进行操作 DropTarget：可列表视图中项目是否以拖放操作的目标显示 FlatScrollBars：是否让滚动条有平滑的效果...GetSearchString：可在列表视图有焦点时获得用户输入的字符序列，列表视图添加字符串到查找字符串，并查找匹配的项 IsEditing：判断当前用户是否正在对项目进行操作 Scroll：可通过水平像素和垂直像素滚动列表视图的内容...可指定单个区最大化时，用户的操作，说明，用户不能最大化固定大小的区 Bands：保存一个TCoolBands Bitmap：在TcoolBand区后显示的图像 Constraints：指定组件宽度和高度的最大值和最小值...FixedSize：确定TcoolBar区能否保持统一的高度（或宽度） ShowText：程序运行时，是否显示TcoolBand的Text中的内容 Vertical：默认为假，组件中的区按从左到右从上到下的方法水平排列
11，如何改变鼠标的形状？...，单击停止。...31,在800*600显示器中，如何不让网页水平出现滚动条！ 设至，网页中的表格宽度为778。 32,关于如何改变鼠标的形状？...31,在800*600显示器中，如何不让网页水平出现滚动条！ 设至，网页中的表格宽度为778。 32,关于<!
注意： 1 、 固定定位和绝对定位都是脱离了标准流，不会影响标准流布局（也不影响浮动） 2 、 固定定位元素，哪怕拖动滚动条，元素位置也保持在页面不变。...）布局，在页面固定，哪怕拖动滚动条也一样。...不受父元素约束 6.3 总结 1 、 固定定位和绝对定位都是脱离了标准流，不会影响标准流布局（也不影响浮动） 2 、 固定定位元素，哪怕拖动滚动条，元素位置也保持在页面不变。...所以 CSS 中，我们需要学习如何通过设置边偏移 +margin ，达到水平居中效果。...，相当于页面水平垂直居中） 子元素 - 设置： 固定 定位，子元素在 页面 内 水平垂直居中 适用于：手动自定义设置子元素的水平垂直居中效果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
