div超出部分出现滚动条并修改滚动条的默认样式

使用overflow的属性 auto 和scroll 可以在内容超出的时候出现滚动条。

overflow	设置包括水平和竖直方向内容溢出时的操作
overflow-x	设置水平方向内容溢出时的操作
overflow-y	设置竖直方向内容溢出时的操作

这里以overflow-y为例

overflow-y的值有一下几种：

其中前四种主流浏览器都支持，后两种no-display和no-content 目前没有浏览器支持。所以这里只测试了前四个属性值。

这是一个小demo，分别测试了visible,auto,hidden,scroll：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">ul li{width:200px;height: 50px;float: left;margin-right: 10px;list-style: none;text-align: left;}.scr{clear: both;}.scrollcontainer{border:4px solid #146C68;width:200px;height: 200px;overflow-y:visible;float: left;margin-right: 10px;}.scrollcontainer_auto{overflow-y:auto;}.scrollcontainer_hide{overflow-y:hidden;}.scrollcontainer_scroll{overflow-y:scroll;}</style>
</head>
<body><ul><li>默认 visible</li><li>自动 auto</li><li>超出隐藏 hidden</li><li>超出出现滚动条 scroll</li></ul><br/><div class="scr"><div class="scrollcontainer">我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。</div><div class="scrollcontainer scrollcontainer_auto">我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。</div><div class="scrollcontainer scrollcontainer_hide">我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。</div><div class="scrollcontainer scrollcontainer_scroll">我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。</div></div>
</body>
</html>

运行之后效果如下：

通常情况下，只要设置overflow-y:auto,就可以实现内容超出时出现滚动条，没有超出时没有滚动条的功能！

下面介绍改变滚动条默认样式的方法,采用的auto，主要用到的滚动条的属性有

::-webkit-scrollbar	设置滚动条整体宽度
::-webkit-scrollbar-track	设置滚动条的轨道的样式
::-webkit-scrollbar-thumb	设置滚动条的滑块的样式

这是一个小demo：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.scrollcontainer{border:4px solid #146C68;width:200px;height: 200px;overflow-y:visible;float: left;margin-right: 10px;}.scrollcontainer_auto{overflow-y:auto;}/*滚动条整体宽度*/.scrollcontainer_auto::-webkit-scrollbar{width: 20px;     /*宽对应滚动条的尺寸*/}/*轨道*/.scrollcontainer_auto::-webkit-scrollbar-track{background: yellow;}/*滑块*/.scrollcontainer_auto::-webkit-scrollbar-thumb{border-radius: 5px;background: red;}</style>
</head>
<body><div class="scrollcontainer scrollcontainer_auto">我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。</div>
</body>
</html>

运行之后效果如下：

虽然配色有点西红柿炒鸡蛋，但是对比明显！

div超出部分出现滚动条并修改滚动条的默认样式相关推荐

[vue-element] ElementUI怎么修改组件的默认样式？
[vue-element] ElementUI怎么修改组件的默认样式? 方法一:/deep/ 方法二:>>> 方法三:在外层添加一层div,设置自定义类名,再修改里边的样式, 格式. ...
图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式
在页面布局时经常会用到input输入框,有时为了提示用户输入正确的信息,需要用placeholder属性加以说明.这篇文章就和大家讲讲placeholder属性怎么用以及如何修改placeholder ...
css去掉滚动条，修改滚动条样式
去掉滚动条: body { overflow:scroll;overflow-y:hidden; } 修改滚动条默认样式: ::-webkit-scrollbar { width:5px; } ::- ...
react中修改antd的默认样式
最近在做react+antd项目.不可避免的遇到了修改antd默认样式的问题. 比如,table组件的表头背景色设置,如果直接使用元素样式,会修改整个项目的table.这里我用的方法是,给table添 ...
html复选框不可修改,如何用【伪类】成功修改HTML checkbox默认样式？（新checkbox覆盖老checkbox无法点击的问题）...
按照一篇博客上的指导,修改checkbox默认样式: (博客地址: https://www.cnblogs.com/GumpY... ) 效果图: 按照博客,我的意图是: 1-把原checkbox 的 ...
项目中如何修改element-ui的默认样式
一.去除scoped 去掉style的scoped,用最外层盒子的class名包裹需要修改组件的class名例: <template> <el-container cla ...
css 新增div滚动条、修改滚动条样式
1.新增滚动条,需要设置div的高度height,如果div里面的内容超过height,则使用 overflow:auto; overflow:auto; 2.修改div滚动条样式 .div::-we ...
修改naive ui默认样式，css变量值修改
新项目开发使用了naive ui组件库,使用组件时涉及到css样式修改,可以直接在组件父容器上使用组件内自带的css变量,组件会自动继承父容器的css变量值,不会影响其他页面使用: 示例:一个注册表单 ...
修改video标签默认样式问题video播放器样式优化；video播放器默认显示图片
需求: 1.播放器可以支持上传默认封面图片 2.播放器的进度条长度拉长些,与播放器长度一样长,或者其他方式美化一下首先需求1.播放器可以支持上传默认封面图片解决方案: 1.第一种方法可以直接在vid ...

div超出部分出现滚动条并修改滚动条的默认样式

div超出部分出现滚动条并修改滚动条的默认样式相关推荐

最新文章

热门文章