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)


相关推荐

  • 感知机及其R实现

    感知机及其R实现感知机1.感知机模型定义:假设输入空间(特征空间)是χ⊆Rn\chi\subseteqR^n,输出空间是Y={+1,−1}Y=\{+1,-1\}。输入x∈χx\in\chi表示实例的特征向量,对应于输入空间的点;输出y∈Yy\inY表示实例的类别。由输入空间到输出空间的如下函数f(x)=sign(w⋅x+b)f(x)=sign(w\cdotx+b)称为感知机。其中,ww和bb为感知

  • CentOS6.5使用yum快速搭建LAMP(Linux+Apache+MySQL+PHP)环境「建议收藏」

    CentOS6.5使用yum快速搭建LAMP(Linux+Apache+MySQL+PHP)环境

  • Java之父:詹姆斯·高斯林 (James Gosling)

    Java之父:詹姆斯·高斯林 (James Gosling)Java之父:詹姆斯·高斯林(JamesGosling)Java自1995诞生,至今已经20多年的历史。Java的名字的来源:Java是印度尼西亚爪哇岛的英文名称,因盛产咖啡而闻名。Java语言中的许多库类名称,多与咖啡有关,如JavaBeans(咖啡豆)、NetBeans(网络豆)以及ObjectBeans(对象豆)等等。SUN和JAVA的标识也正是一杯正冒着热气的咖啡。据JamesGosling回忆,最初这个为TV机顶盒所设计的语言在Sun内部一直称为Green项目。我们的新语言需要一个

  • Jenkins(5)生成allure报告

    Jenkins(5)生成allure报告前言jenkins集成了allure插件,安装插件后运行pytest+allure的脚本即可在jenkins上查看allure报告了。allure安装在运行代码的服务器本机,我这里是用的dock

  • 两个正序数组 找中位数_两个有序数组的中位数

    两个正序数组 找中位数_两个有序数组的中位数原题连接给定两个大小分别为 m 和 n 的正序(从小到大)数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。示例 1:输入:nums1 = [1,3], nums2 = [2]输出:2.00000解释:合并数组 = [1,2,3] ,中位数 2示例 2:输入:nums1 = [1,2], nums2 = [3,4]输出:2.50000解释:合并数组 = [1,2,3,4] ,中位数 (2 + 3) / 2 = 2.5示例 3:输入:nums1 = [0,

  • 平均数,中位数,众数的特点及应用场合图片_中位数众数应用例子

    平均数,中位数,众数的特点及应用场合图片_中位数众数应用例子平均数、中位数、众数都是度量一组数据集中趋势的统计量。所谓集中趋势是指一组数据向某一中心值靠拢的倾向,测度集中趋势就是寻找数据一般水平的代表值或中心值。而这三个特征数又各有特点,能够从不同的角度提供信息。平均数特点:计算用到所有的数据,它能够充分利用数据提供的信息,它具有优的数学性质,因此在实际应用中较为广泛。但它受极端值的影响较大。应用场合:没有极端值的情况下数据集中趋势的刻画。

发表回复

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

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