滚动条

[jQuery].scrollTop() 函数详解

由 我与影子孤独终老i 提交于 2019-11-29 05:16:09
scrollTop() 函数用于 设置或返回当前匹配元素相对于垂直滚动条顶部的偏移 。 当一个元素的实际高度超过其显示区域的高度时，在一定的设置下，浏览器会为该元素显示相应的垂直滚动条。此时， scrollTop() 返回的就是该元素在可见区域之上被隐藏部分的高度(单位：像素)。 如果垂直滚动条在最上面(也就是可见区域之上没有被隐藏的内容)，或者当前元素是不可垂直滚动的，那么 scrollTop() 将返回0。 该函数属于 jQuery 对象(实例)，并且对可见的和隐藏的元素均有效。 语法 jQuery 1.2.6 新增该函数。 jQueryObject.scrollTop( [ value ] )注意：1、如果省略了value参数，则表示返回偏移值；如果指定了该参数，则表示设置偏移值。2、scrollTop()函数的"设置"操作针对的是当前jQuery对象所匹配的每一个元素；"读取"操作只针对第一个匹配的元素。 参数 参数 描述 value 可选/Number类型用于设置的偏移值。 返回值 scrollTop() 函数的返回值为 Number/jQuery类型，返回值的类型取决于 scrollTop() 函数当前执行的是"设置"操作还是"读取"操作。 如果 scrollTop() 函数执行的是"设置"操作，则返回当前jQuery对象本身；如果是"读取"操作

css 隐藏滚动条

由 ﹥＞﹥吖頭↗ 提交于 2019-11-29 03:17:40
/* component: node-list */ .node-list { width: 12.5%; max-height: 100%; /* 隐藏滚动条 */ overflow-x: hidden; /* background-color: tomato; */ } .node-list::-webkit-scrollbar { display: none; } 来源： https://www.cnblogs.com/aisowe/p/11441937.html

CSS3自定义滚动条样式方法

由 淺唱寂寞╮ 提交于 2019-11-29 01:18:21
该代码收集于网上资源,非原创 /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: 10px; /*对水平流动条有效*/ } /*定义滚动条的轨道颜色、内阴影及圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: rosybrown; border-radius: 3px; } /*定义滑块颜色、内阴影及圆角*/ ::-webkit-scrollbar-thumb { border-radius: 7px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: #da4744; } /*定义两端按钮的样式*/ ::-webkit-scrollbar-button { background-color: #da4744; } /*定义右下角汇合处的样式*/ ::-webkit-scrollbar-corner { background: da4744; } ::-webkit-scrollbar-track-piece {

全屏遮罩

由 和自甴很熟 提交于 2019-11-28 22:00:26
前端开发中，很多时候一个弹出层的显示都会伴随着一个遮罩层的显示。 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>全屏遮罩</title> 8 </head> 9 10 <body> 11 <style> 12 .float-bg { 13 width: 100%; 14 height: 100%; 15 background-color: #000; 16 opacity: .6; 17 filter: alpha(opacity=60); 18 position: absolute; 19 left: 0; 20 top: 0; 21 z-index: 1100; 22 } 23 </style> 24 <div class="float-bg" id="float-bg"> </div> 25 </body> 26 </html>

bom案例4-模拟滚动条

由 此生再无相见时 提交于 2019-11-28 19:32:18
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * {margin: 0;padding: 0;} .box { width: 300px; height: 500px; border: 1px solid red; margin: 100px; position: relative; overflow: hidden; /* 不让文字被选中 */ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .content { padding: 5px 18px 5px 5px; position: absolute; top: 0; left: 0; } .scroll { width: 18px; height: 100%; position: absolute; top: 0; right: 0; background-color: #eee; } .bar { height: 100px; width: 100%; position: absolute; top: 0; left: 0; background-color:

odoo tree视图中实现横向滚动条

由 [亡魂溺海] 提交于 2019-11-28 19:29:12
一、使用背景 　　当tree视图中显示内容过多时，会使得列表挤为一堆，样式会变的很难看，这时候就需要增加滚动条 二、实现效果 　　内容超过宽度时，出现横向滚动条 三、实现方法 　　在views.less文件中加入以下代码即可，在odoo10中路径为：web/static/src/less/views.less 来源： https://www.cnblogs.com/da-tong/p/11423191.html

css修改滚动条样式

由 倾然丶 夕夏残阳落幕 提交于 2019-11-28 19:21:31
css样式 /*修改滚动条样式*/ div::-webkit-scrollbar{ width:10px; height:10px; /**/ } div::-webkit-scrollbar-track{ background: rgb(239, 239, 239); border-radius:2px; } div::-webkit-scrollbar-thumb{ background: #bfbfbf; border-radius:10px; } div::-webkit-scrollbar-thumb:hover{ background: #333; } div::-webkit-scrollbar-corner{ background: #179a16; } 参数说明 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） ::-webkit

jquery的scrollTop方法

由 前提是你 提交于 2019-11-28 14:51:48
scrollTop方法设置或返回备选元素的垂直滚动条位置。 提示：当滚动条位于最顶部时，位置是0 当用于返回位置时： 该方法返回第一个匹配元素的滚动条的垂直位置 当用于设置位置时： 该方法设置所有匹配元素的滚动条的垂直位置 语法： 返回垂直滚动条位置：$(selector).scrollTop(); 设置垂直滚动条位置：$(selector).scrollTop(position); //position以像素为单位的垂直滚动条位置 来源： https://www.cnblogs.com/sjzgk/p/11410809.html

css 滚动条样式

由 你。 提交于 2019-11-28 14:41:16
1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置的值为visible、scroll、hidden、auto visible 默认值。使用该值时，无论设置的"width"和"height" 的值是多少，其中的内容无论是否超出范围都将被强制显示。 hidden 效果与visible相反。任何超出"width"和"height"的内 容都会不可见。 scroll 无论内容是否超越范围，都将显示滚动条。 auto 当内容超出范围时，显示滚动条，否则不显示。 应用: 没有水平滚动条: <div style="overflow-x:hidden">test</div> 没有垂直滚动条 <div style="overflow-y:hidden">test</div> 没有滚动条 <div style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</div> 自动显示滚动条 <div style="height:100px;width:100px;overflow:auto;">test</di v> 2,自己定义滚动条的颜色

CSS之设置滚动条样式

由 [亡魂溺海] 提交于 2019-11-28 14:33:23
因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的CSS也能解决。 比如网易邮箱的滚动条样子很好看，就是利用的CSS来设置的，而且是webkit浏览器的。如图所示： 下面就讲解这几个属性怎么使用，代表什么意思。 一：webkit下面的CSS设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scrollbar-corner 边角 ::-webkit-resizer 定义右下角拖动块的样式 如图所示： 上面是滚动条的主要几个设置属性，还有更详尽的CSS属性 :horizontal 水平方向的滚动条 :vertical 垂直 方向的滚动条 :decrement 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。) :increment decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如
订阅 滚动条