滚动条 | 易学教程

css改变滚动条样式和简单的table样式

阅读更多关于 css改变滚动条样式和简单的table样式

常用，记录一下。 css修改滚动条样式: /*滚动条的宽度*/ : : - webkit - scrollbar { width : 6 px ; } //滚动条轨道的颜色 : : - webkit - scrollbar - track { /*background black*/ border - radius : 5 px ; } //滚动条的颜色 : : - webkit - scrollbar - thumb { background : # B5B5B5 ; border - radius : 5 px ; } //鼠标经过滚动条时的颜色 : : - webkit - scrollbar - thumb : hover { background : #dad6bf ; } 简单的隔行变色表格样式 < div class = "table-box" > < table border = "0" > < tr class = "odd-tr" > < th > 地区 < / th > < th > 确诊 < / th > < th > 治愈 < / th > < th > 死亡 < / th > < / tr > < tr : class = "{'even-tr':index%2==0,'odd-tr':index%2==1}" v - for = "(item

修改滚动条样式

阅读更多关于修改滚动条样式

前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。演示来看看这2个滚动条demo： demo1（图片版）、 demo2（纯CSS3版）滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处 ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件简洁版这里就不贴出详细代码了，demo里面可以通过查看源码寻找具体样式的设置。来看看demo2中第二个滚动条的样式 /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px;

浏览器滚动条规则

阅读更多关于浏览器滚动条规则

1.如果html标签及body标签中只有一个标签具有overflow属性，该属性将作用于文档（即视窗是否显示滚动条） html { margin: 30px; border: 1px solid red; } body { margin: 30px; border: 1px solid orange; overflow: scroll; } 2.如果html标签及body标签中均具有overflow属性，则html将控制视窗的滚动条，而body将控制body的滚动条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <title>Title</title> <link rel="stylesheet" href="font/style.css"> <style type="text/css"> * { margin: 0; padding: 0; } html { margin: 30px; border: 1px solid red; overflow: hidden; } body { margin: 30px; border:

JavaScript元素位置与距离：client&scroll&offset&MouseEvent&滚动条宽度计算

阅读更多关于 JavaScript元素位置与距离：client&scroll&offset&MouseEvent&滚动条宽度计算

client： clientWidth/clientHeight: 元素内部的宽度/高度，仅包含包含content和padding，不包含滚动条 clientWidth = content width + padding - scrollbar Width clientHeight = content Height + padding - scrollbar Height clientLeft/clientTop: 元素的左border宽度，当文字方向为右至左且出现滚动条时（direction: rtl），需要加上滚动条宽度 clientLeft = border Width + scrollbar Width(对于行内元素这个值为0) clientTop = borderTop 计算浏览器或元素滚动条宽度： elem.offsetWidth - elem.borderLeftWidth - elem.borderRightWidth - elem.clientWidth export default class myUtils { // 计算元素滚动条宽度 static getScrollWidth(elemOrSelect) { if (!elemOrSelect) return; if (elemOrSelect.constructor === String)

出现滚动条时返回顶部！

#boxhead { position: fixed; right: 10px; bottom: 50px; width: 20px; height: 90px; border: 1px solid #ccc; text-align: center; cursor: pointer; display: none; } <div id="boxhead" style="">返回顶端</div> <script> window.onload = function() { var obtn = document.getElementById('boxhead'); //获取回到顶部按钮的ID var clientHeight = document.documentElement.clientHeight; //获取可视区域的高度 var timer = null; //定义一个定时器 var isTop = true; //定义一个布尔值，用于判断是否到达顶部 window.onscroll = function() { //滚动条滚动事件 //获取滚动条的滚动高度 var osTop = document.documentElement.scrollTop || document.body.scrollTop; if(osTop >= clientHeight) { /

JScrollPane

阅读更多关于 JScrollPane

构造方法： JScrollPane(),建立一个空的JscrollPane对象； JScrollPane(Component view),建立一个JscrollPane对象，包含有组件view。在组件大于现实区域时会自动加上滚动条； JScrollPane(Component view,int vsbPolicy,int hsbPolicy),设置滚动条出现的时机； JSxcrollPane(int vsbPolicy,int hsbPolicy)设置滚动条出现的时机。滚动条出现的时机有下面的参数设置： HORIZONAL_SCROLLBAR_ALWAYS------------显示水平滚动条； HORIZONAL_SCROLLBAR_AS_NEEDED-------需要时显示水平滚动条； HORIZONAL_SCROLLBAR_NEVER--------------不显示水平滚动条； VERTICAL_SCROLLBAR_ALWAYS---------------显示垂直滚动条； VERTICAL_SCROLLBAR_AS_NEEDED---------需要时显示垂直滚动条； VERTICAL_SCROLLBAR_NEVER----------------不显示垂直滚动条；来源： https://www.cnblogs.com/lls1350767625/p/7571422

【Java】解析JScrollPane类的使用

阅读更多关于【Java】解析JScrollPane类的使用

在这篇博文中，笔者介绍JScrollPane类的使用，JScrollPane类可以为组件添加滚动条。在这里笔者不会详细介绍该类的方法有哪些，因为在API上已经写得一清二楚了。在这篇博文中，笔者重点介绍JScrollPane依据属性来添加滚动条的。看下面这个案例： JFrame frame=new JFrame("ScrollPanel测试"); JPanel panel=new JPanel(); System.out.println(panel.getPreferredSize().toString()); for(int i=0;i<6;i++){ panel.add(new JButton("按钮"+i)); System.out.println(panel.getPreferredSize().toString()); } frame.add(new JScrollPane(panel)); frame.setPreferredSize(new Dimension(400,400));//宽400，高400 frame.pack(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); 6个按钮的宽度超过了400，结果出现了滚动条。但是我们同时也会发现一个规律

css 修改浏览器滚动条样式

阅读更多关于 css 修改浏览器滚动条样式

本文是基于谷歌浏览器将原有的滚动条样式进行修改，修改结果如下所示。代码如下： <style> ::-webkit-scrollbar{ width: 5px; height: 5px; } ::-webkit-scrollbar-track-piece{ background-color: rgba(0,0,0,0.2); -webkit-border-radius: 7px; } ::-webkit-scrollbar-thumb:vertical{ height: 5px; background-color: rgba(125,125,125,0.7); -webkit-border-radius: 7px; } ::-webkit-scrollbar-thumb:horizontal{ width: 7px; background-color: rgba(125,125,125,0.7); -webkit-border-radius: 7px; } </style> 针对-webkit-scrollbar的其他示意如下： :horizontal //horizontal伪类适用于任何水平方向上的滚动条 :vertical //vertical伪类适用于任何垂直方向的滚动条 :decrement //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片

元素尺寸的获取

阅读更多关于元素尺寸的获取

scrollWidth 、 clientWidth 、 offsetWidth 区别 scrollWidth是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度） clientWidth是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变 offsetWidth是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：窗口显示区（可视区域）的宽度和高度，包括滚动条 window.innerHeight - IE不支持该属性，IE中body元素的clientHeight属性与该属性相同。window.innerWidth – IE不支持该属性，IE中body元素的clientWidth属性与该属性相同。对于 Internet Explorer 8、7、6、5：窗口显示区（可视区域）的宽度和高度，不包括滚动条区域 document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body

轻松自动化---selenium-webdriver(python) (十一)

阅读更多关于轻松自动化---selenium-webdriver(python) (十一)

本节重点：控制滚动条到底部有时候我们需要控制页面滚动条上的滚动条，但滚动条并非页面上的元素，这个时候就需要借助 js 是来进行操作。一般用到操作滚动条的会两个场景：注册时的法律条文需要阅读，判断用户是否阅读的标准是：滚动条是否拉到最下方。要操作的页面元素不在吸视范围，无法进行操作，需要拖动滚动条其实，实现这个功能只要一行代码，但由于不懂 js ，所以花了不小力气找到这种方法。用于标识滚动条位置的代码 <body onload= "document.body.scrollTop=0 "> <body onload= "document.body.scrollTop=100000 "> 如果滚动条在最上方的话，scrollTop=0 ，那么要想使用滚动条在最可下方，可以scrollTop=100000 ，这样就可以使滚动条在最下方。场景一先来解决场第一个问题，法律条款是一个内嵌窗口，通过 firebug 工具可以定位到内嵌入窗口可以定位到元素的 id ，可以通过下面的代码实现。 js="var q=document.getElementById('id').scrollTop=10000" driver.execute_script(js) 注：由于没找到合适的例子，所没验证，从参考资料来看这种写法应该没问题，如有请反馈。场景二有滚动条的页面到处可见

订阅滚动条