话不多说，整个页面代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0;margin:0;}
.videoList{ background: #fce5e3;padding:10px;max-height: 440px;overflow-y: scroll;}
.videoList li{margin-bottom:10px;padding:5px;background :#fff;}
.videoList li h3{font-size: 18px;color: #333;line-height: 36px;}
.videoList li p{line-height: 24px;color: #666;font-size: 14px;}
.publicText {color: #666;font-size: 14px;padding:4px 0 0;}
.editBtn{width: 140px;}
.editBtn a{display: inline-block;margin-right: 15px;color: #666;}
.pulicTime{ width: 410px;text-align: right;}
.pulicTime span{display: inline-block;margin-right: 6px;}
.clearfix:after {display:block;clear:both;height:0;visibility:hidden;font-size:0;line-height:0;content:'';}
.fl{float: left;}
.fr{float: right;}
img{display: block;}
/*滚动条垂直方向的宽度*/
::-webkit-scrollbar
{
width: 10px;
}
/* 垂直滚动条的滑动块 */
::-webkit-scrollbar-thumb:vertical {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:rgba(129,129,129,0.5);
}
</style>
</head>
<body>
<div class="newsVideo">
<ul class="videoList">
<li>
<h3>你同意吗</h3>
<p>79年前今天，卢沟桥的枪声，打破安宁，也拉开全民族抗战的序幕。8年浴血奋战，超过3500万军民伤亡，中华民族遭受屈辱，也以顽强抗战，迎来属于民族的胜利。如今硝烟散去，但曾经的牺牲、抗争不该被遗忘。今天抗战纪念日，铭记历史，吾辈自强今日每日！</p>
<div class="publicText clearfix">
<div class="editBtn fl">
<a href="">编辑</a>
<a href="">删除</a>
</div>
<div class="pulicTime fr">
<span>开发-刘梅</span>
<span>发表于07-07</span>
<span>09:30</span>
</div>
</div>
</li>
<li>
<h3>你同意吗</h3>
<p>79年前今天，卢沟桥的枪声，打破安宁，也拉开全民族抗战的序幕。8年浴血奋战，超过3500万军民伤亡，中华民族遭受屈辱，也以顽强抗战，迎来属于民族的胜利。如今硝烟散去，但曾经的牺牲、抗争不该被遗忘。今天抗战纪念日，铭记历史，吾辈自强今日每日！</p>
<div class="publicText clearfix">
<div class="editBtn fl">
<a href="">编辑</a>
<a href="">删除</a>
</div>
<div class="pulicTime fr">
<span>开发-刘梅</span>
<span>发表于07-07</span>
<span>09:30</span>
</div>
</div>
</li>
<li>
<h3>你同意吗</h3>
<p>79年前今天，卢沟桥的枪声，打破安宁，也拉开全民族抗战的序幕。8年浴血奋战，超过3500万军民伤亡，中华民族遭受屈辱，也以顽强抗战，迎来属于民族的胜利。如今硝烟散去，但曾经的牺牲、抗争不该被遗忘。今天抗战纪念日，铭记历史，吾辈自强今日每日！</p>
<div class="publicText clearfix">
<div class="editBtn fl">
<a href="">编辑</a>
<a href="">删除</a>
</div>
<div class="pulicTime fr">
<span>开发-刘梅</span>
<span>发表于07-07</span>
<span>09:30</span>
</div>
</div>
</li>
<li>
<h3>你同意吗</h3>
<p>79年前今天，卢沟桥的枪声，打破安宁，也拉开全民族抗战的序幕。8年浴血奋战，超过3500万军民伤亡，中华民族遭受屈辱，也以顽强抗战，迎来属于民族的胜利。如今硝烟散去，但曾经的牺牲、抗争不该被遗忘。今天抗战纪念日，铭记历史，吾辈自强今日每日！</p>
<div class="publicText clearfix">
<div class="editBtn fl">
<a href="">编辑</a>
<a href="">删除</a>
</div>
<div class="pulicTime fr">
<span>开发-刘梅</span>
<span>发表于07-07</span>
<span>09:30</span>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
css样式代码如下：
/*默认滚动条样式*/
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
border: 1px #d3d3d3 solid;
box-shadow: 0px 0px 3px #dfdfdf inset;
border-radius: 10px;
background: #eee;
}
::-webkit-scrollbar-thumb {
border: 1px #808080 solid;
border-radius: 10px;
background: #999;
}
::-webkit-scrollbar-thumb:hover {
background: #7d7d7d;
}