新网创想网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
在css样式中设置浏览器滚动条样式操作步骤如下:
我们注重客户提出的每个要求,我们充分考虑每一个细节,我们积极的做好成都网站制作、做网站服务,我们努力开拓更好的视野,通过不懈的努力,创新互联公司赢得了业内的良好声誉,这一切,也不断的激励着我们更好的服务客户。 主要业务:网站建设,网站制作,网站设计,成都小程序开发,网站开发,技术开发实力,DIV+CSS,PHP及ASP,ASP.Net,SQL数据库的技术开发工程师。
1.打开软件,新建html文档,如下图红框所示为新建界面。
2.在/head和body中间书写hmtl代码,div这里面输入你想要输入的内容即可/div,如下图红框所示。
3.然后在body和/body中间书写外层轨道css代码:body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外层轨道*/} 。
这里主要是设置外层轨道的形状和颜色,根据想要设置的样式进行调节即可,如下图红框所示。
4.然后在外层轨道下面书写内层轨道css代码:body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*内层轨道*/}。
这里主要是设置内层轨道的形状和颜色,根据想要设置的样式进行调节即可,如下图红框所示。
5.以上代码代码输入完成,就可以运行看效果,效果如下红框所示,滚动条设置完成,如果不喜欢样式,回去修改代码属性即可。
1、首先打开前端开发工具,新建一个HTML代码页面,如下图所示。
2、在html代码页面上创建一个父div和一个子div,同时给这两个div添加一个class分别为scroll-box、scroll。
3、给子div添加内容,为了让滚动条可以实现,尽量多添加一些内容。
4、设置scroll-box、scroll类样式。给scroll-box设置一个高度和内容超出后隐藏的样式,给scroll设置内容超出后显示滚动条、高度为100%、宽=100%+滚动条的宽
5、最后保存html代码,然后使用浏览器打开,这个时候会发现滚动条已经不显示出来,但是页面内容依然可以滚动。
目前只有chrome支持设置滚动条样式,给div设置伪类
::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
如div::-webkit-scrollbar{
width:4px
}