滚动条

css 自定义滚动条样式

由 左心房为你撑大大i 提交于 2020-04-07 17:01:45
以前写的，找不到效果图了，就不上效果图了，直接上代码好啦，免得自己忘了怎么写 .login-box { //login-box就是 需要修改样式的 盒子 width: 200px; margin-top: 10px; height: calc(100% - 88px); overflow-y: auto; .login { display: flex; justify-content: space-between; z-index: 9999; color: #6f7180; &.backgroundhover { color: #409eff; } &:hover { color: #409eff; z-index: 9999; } } .login:hover { cursor: pointer; } .login-left { margin-top: 10px; width: 200px; } } ::-webkit-scrollbar { //以下是修改滚动条样式的代码 width: 4px; height: 4px; } ::-webkit-scrollbar-track { border-radius: 5px; background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-thumb { border-radius: 0;

delphi中Webbrowser

由 筅森魡賤 提交于 2020-04-07 10:36:43
1.获得网页中变量值 htm中<script> var currID=123</script> 程序中可以这么调用 id := Form1.WebBrowser1.OleObject.Document.script.currID 值得说明的是,变量可以是javascript定义的,也可以是vbscript定义的,如果Webbrowser1中找不到该变量,调用会触发一个异常事件,即变量currID不存在 2.执行网页中的函数 tmp := 'currID = getNextID(currID)'+#13#10; Form1.WebBrowser1.OleObject.Document.parentWindow.execScript(tmp,'JavaScript'); 调用函数的方法就是execScript接口,同样,如果函数不存在,或者运行错误也会触发脚本错误异常 3.设置网页背景 背景图片 WebBrowser1.OleObject.Document.body.background := ' http://seelearn.com/bg.gif ' 背景颜色 WebBrowser1.OleObject.Document.body.bgcolor := '#eeeeee' 4.调用网页中已知对象 src := WebBrowser1.OleObject.Document

更改网页内滚动条效果

由 ￡可爱￡侵袭症＋ 提交于 2020-04-06 17:31:54
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 9px; height: 9px } /*定义滚动条轨道*/ ::-webkit-scrollbar-track { background-color: transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { background-color: #0093ff; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em } 本站点应用的滚动条样式即为上述描写

JavaScript DOM 常用尺寸

由 三世轮回 提交于 2020-04-01 10:48:37
JavaScript DOM 常用尺寸 JavaScript 操作 DOM 时经常会用到一些尺寸，本文介绍怪异模式和标准模式下的滚动条距离、窗口尺寸、文档尺寸、元素文档坐标的兼容性写法以及窗口滚动到指定位置的方法 怪异和标准模式 浏览器在解析 CSS 时有怪异和标准两种模式，目的是为了向旧版本兼容 标准模式下浏览器会按 w3c 规范解析代码 怪异模式下按浏览器自身规范解析代码，一般会向后兼容 5 个版本 首句使用 <!DOCTYPE html> ，则使用 HTML5 规范，即标准模式，不加这句则使用怪异模式 使用 document.compatMode 返回 CSS1Compat 表示处于标准模式，返回 BackCompat 则为怪异模式 滚动条滚动距离 常见写法 // 获取滚动条和上侧/左侧的距离，即页面滚动距离 window.pageYOffset/pageXOffset document.bady.scrollTop/scrollLeft document.documentElement.scrollTop/scrollLeft window.scrollY/scollX 兼容性表 (b) 代表怪异模式，(s) 代表标准模式，C 代表 chrome，F 代表 firefox，O 代表 opera 浏览器 IE6789(b) IE678(s) IE9(s) C(bs) O/F

改变element-ui滚动条设置，

由 穿精又带淫゛_ 提交于 2020-03-28 21:48:04
基于vue的滚动条组件之--element隐藏组件滚动条scrollbar使用 在项目中，总是需要用到滚动条，但windows浏览器默认的滚动条是很丑的，为了页面美观，可以考虑优化滚动条样式。 vue Element UI官方文档上并没有放出滚动条相关的示例说明，但是实际上是有这么一个组件的，可查看源码。 <el-scrollbar></el-scrollbar> 　　将会出现滚动的内容放到上述标签内就可以了。 这里要简单的设置一下，将标签的height设为100%，查看效果的时候，会出现一个横向的滚动条，如果你不想要横向的滚动条，使用下面css属性设置就可以只显示竖向滚动条。 .el-scrollbar__wrap { overflow-x: hidden; } 示例使用方法如下： 来源： https://www.cnblogs.com/miaosen/p/9553516.html

css控制字数

由 跟風遠走 提交于 2020-03-24 07:11:14
控制文章标题字数，不是动态网页的专利，如果静态页面使用CSS样式，也可以实现相同的效果！ 看这个例子，你们可以复制到记事本保存为HTML文件看效果！ <html> <title>css控制字数</title> <head> <style type="text/css"> .dd { border: solid 1px gray; width:180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; course:hand; } </style> </head> <body> <span class="dd"> 信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数 </span> <br> <div class="dd"> 信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数 </div> </body> </html> 看到效果后，您应该相信这不是虚言了吧，o(∩_∩)o...！ 其中white-space 属性设置如何处理元素内的空白。 这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增 的。 继承性：Yes JavaScript 语法

html中div加滚动条

由 ∥☆過路亽．° 提交于 2020-03-22 08:40:47
div 加滚动条的两种方法： 一、 <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢，否则不成的 不过在不超出时，会有下面的滚动条，所以不是最好的选择 二、 <div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div> 记住宽和高一定要设置噢，否则不成的 这样比较好的是，在宽和高不超出时，只是一条线 三、说明 直接为div指定overflow属性为auto即可，但是必须指定div的高度，如下： <div style="position:absolute; height:400px; overflow:auto"> </div> 如果要出现水平滚动条，则： overflow-x:auto 同理，垂直滚动条为： overflow-y:auto 如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative 来源： https://www.cnblogs.com/yanl55555/p/12543994.html

uniapp中scroll-view自定义滚动条

由 拜拜、爱过 提交于 2020-03-21 16:00:36
注意事项 需在app.vue中添加如下，需要important /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16upx!important; height: 16upx!important; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #fff; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; } 　　 来源： https://www.cnblogs.com/lizhao123/p/12539596.html

webkit内核浏览器自定义滚动条样式

由 主宰稳场 提交于 2020-03-19 12:05:56
CSS ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ } ::-webkit-scrollbar-thumb { /* 5 */ } ::-webkit-scrollbar-corner { /* 6 */ } ::-webkit-resizer { /* 7 */ } 以上CSS代码所管辖的区域对就关系：以上注释中的数字与下图中数字相对应。 上图正如如下所言： ::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。 ::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 ::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）。 ::-webkit
订阅 滚动条