html div 隐藏滚动条样式,div滚动条样式隐藏与显示

html div 隐藏滚动条样式,div滚动条样式隐藏与显示DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢?要设置CSS滚动条样式,需要用到overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏,接下来为大家介绍。常规overflow怎么设置overflow-y:scroll总是显…

大家好,又见面了,我是你们的朋友全栈君。

DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢?

要设置CSS滚动条样式,需要用到overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏,接下来为大家介绍。

常规overflow怎么设置

overflow-y:scroll 总是显示纵向滚动条

overflow-y:visible 不剪切内容也不添加纵向滚动条

overflow-x:scroll 总是显示横向滚动条

overflow-x:visible 不剪切内容也不添加横向滚动条

overflow语法值

overflow:visible | auto | hidden | scroll

参数说明:

visible:不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效;

auto:此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条,DIV默认情况也是这个值,但需要设置时候设置即可;

hidden:不显示超过对象尺寸的内容;

scroll:总是显示滚动条。

div自定义滚动条样式

滚动条的css样式主要有三部分组成:

::-webkit-scrollbar 定义了滚动条整体的样式;

::-webkit-scrollbar-thumb 滑块部分;

::-webkit-scrollbar-thumb 轨道部分;

自定义滚动条样式实例:

85ac1f0d267865a41ad8d66ee50dd375.png

1、html代码:

2、css代码:

.test{

width: 50px;

height: 200px;

overflow: auto;

float: left;

margin: 5px;

border: none;

}

.scrollbar{

width: 30px;

height: 300px;

margin: 0 auto;

}

.test-1::-webkit-scrollbar {/*滚动条整体样式*/

width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/

height: 1px;

}

.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

border-radius: 10px;

-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

background: #535353;

}

.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/

-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

border-radius: 10px;

background: #EDEDED;

}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158006.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • wireshark捕获tcp数据包_抓包分析详解

    wireshark捕获tcp数据包_抓包分析详解一.实验目的通过本次实验,掌握使用Wireshark抓取TCP/IP协议数据包的技能,能够深入分析TCP帧格式及“TCP三次握手”。通过抓包和分析数据包来理解TCP/IP协议,进一步提高理论联系实践的能力。二.实验内容1.本次实验重点:利用Wireshark抓TCP包及TCP包的分析。2.本次实验难点:分析抓到的TCP包。3.本次实验环境:Windows7,Wiresha…

  • oracle 优化or 更换in、exists、union all几个字眼,测试没有问题!

    oracle 优化or 更换in、exists、union all几个字眼,测试没有问题!

  • 史上超强最常用SQL语句大全

    史上超强最常用SQL语句大全史上超强最常用SQL语句大全,)1)DDL–数据定义语言用来定义数据库对象:数据库,表,列等。关键字:create,drop,alter等2)DML–数据操作语言用来对数据库中表的数据进行增删改。关键字:insert,delete,update等3)DQL–数据查询语言用来查询数据库中表的记录(数据)。关键字:selewhere等4)DCL–数据控制语言用来定义数据库的访问权限和安全级别,及创建用户。关键字:GRANT,REVOKE等

  • python读取图像数据的一些方法[通俗易懂]

    python读取图像数据的一些方法[通俗易懂]工作和学习中设计一个神经网络中经常需要设计一个数据载入器。首先第一件事我们要根据我们的任务要求确定一个数据提供的方法。如我们是一个分类任务,我们就需要读取数据和数据本身对应的标签。12除了分类任务之外当然还有一些图像到图像的任务,如…

  • 什么是Web Service(SOAP)?

    什么是Web Service(SOAP)?SOAP请求(SimpleObjectAccessProtocol,简单对象访问协议)是HTTPPOST的一个专用版本,遵循一种特殊的XML消息格式,Content-type设置为:text/xml,任何数据都可以XML化。SOAP:简单对象访问协议。SOAP是一种轻量的,简单的,基于XML的协议,它被设计成在web上交换结构化的和固化的信息。SOAP可以和现存的许多因特网协议和格式结合…

  • php cas单点登录

    php cas单点登录一、CAS简介1、结构体系从结构体系看,CAS包括两部分:CASServer和CASClient。1.1、CASServerCASServer负责完成对用户的认证工作,需要独立部署,CASServer会处理用户名/密码等凭证(Credentials)。1.2、CASClient负责处理对客户端受保护资源的访问请求,

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号