想咨询一下滚动条的属性设置
来源：5-12 项目作业
键盘f11
2020-08-22 21:01:53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/**
使用CSS自定义样式
*/
/*定义了滚动条整体样式；*/
::-webkit-scrollbar{
height: 28px !important;
width: 28px !important;
}
/*定义了滚动条滑块的样式*/
::-webkit-scrollbar-thumb {
border-radius: 0;
border-style: dashed;
background-color: rgba(12, 80, 235, 0.4);
border-color: #e2242400;
border-width: 1.5px;
background-clip: padding-box;
}
/*定义了轨道的样式*/
::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(157, 165, 183, 0.7)
}
.container{
width:500px;
height:500px;
background:yellow;
overflow:scroll;
}
.content{
width:600px;
height:600px;
font-size:10px;
}
.container1{
width:500px;
height:500px;
background:yellow;
overflow:scroll;
}
.content1{
width:600px;
height:600px;
font-size:10px;
}
</style>
<body>
<div class="container">
<div class="content">
所有主流浏览器都支持 overflow 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，
用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
</div>
</div>
<div class="container1">
<div class="content1">
所有主流浏览器都支持 overflow 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，
用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
</div>
</div>
</body>
</html>
老师，您好，我想咨询一下关于滚动条的属性设置，因为项目作业中涉及到两处滚动条（且两处滚动条的样式是不一致的）,科室排班表右侧的滚动条是没有上下两端的按钮，也就是::-webkit-scrollbar-button ：属性为display:none;但是实际操作时，如上述代码所示，对滚动条样式属性更改以后，默认所有的滚动条样式都进行了更改？这个是因为什么原因呢？
我不是很清楚，如何对指定的滚动条进行样式上的修改，如果不指定的话默认所有的滚动条都按照修改的样式属性来执行。预约规则模块的滚动条是默认样式，科室排班表处的滚动条样式因为是需要进行更改的。如何指定此处变动，其余滚动条属性不变呢？麻烦老师指点一下，谢谢老师
3回答
-
好帮手慕码
2020-08-23
同学你好，可以如下修改，来区分不一样的滚动条：
效果：
另，可以查看下素材中提供的效果图，两个页面的滚动条其实是一样的。在演示视频不一样可能是因为录制视频是mac版的电脑哦，滚动条在不一样的系统、浏览器中显示的效果可能是不一样的。因此，直接使用overflow属性设置就可以了哦。
祝学习愉快~
0 -
键盘f11
提问者
2020-08-23
你好，同学，应该是不一样的哈，我看了一下滚动条一个是有上下端的箭头，一个是没有上下的箭头，而且滚动条加了一些border-radiu属性，边缘是倒了圆角的，改是可以自己改的，但是两个属性分开独立设置不知道怎么去处理
0 -
qwertyuiopl
2020-08-23
兄弟，-webkit-scrollbar这些属性为什么没有被收入主要的学习属性里呢？是因为有太大的兼容性和不稳定性了，因此实际上这些属性在开发使用并不好用，也不咋常用，开发里用更多的是原生和插件。并且这个作业里两个滚动条是一样的喃，
你就用overflow:y就好了，
0
相似问题