PC端 overflow-y:scroll 默认的滚动条有点丑,所以百度找了一个用 jquery.mCustomScrollbar 做pc滚动条效果
案例文件下载地址:https://download.csdn.net/download/ws19900201/11759207
代码如下:
所需jQuery等文件请自行百度下载。。
<!DOCTYPE html>
<html>
<head>
<title>scroll</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="img/logoimg.png">
<!--<meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=1.0, user-scalable=no">-->
<link rel="stylesheet" href="css/base.css" media="screen" />
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" />
<style>
.kaidata {
width: 340px;
height: 565px;
overflow: hidden;
border-radius: 10px;
background: #eee;
}
.kaidata .datetxt {
font-size: 18px;
color: #000;
margin: 20px 0 0 15px;
line-height: 38px;
}
.kaidata .timebox {
position: relative;
width: 310px;
height: 480px;
overflow: hidden;
/* padding-left: 2px; */
/* padding-right: 10px; */
margin-left: 26px;
}
.kaidata .timebox ul {
width: 308px;
margin-left: 2px;
height: 100%;
border-left: 2px solid #dedede;
box-sizing: border-box;
/* overflow: auto; */
}
.kaidata .timebox li {
position: relative;
width: 100%;
}
.kaidata .timebox li .datatop .lefdian {
display: block;
position: absolute;
left: -4px;
top: 10px;
width: 6px;
height: 6px;
background: #c4c4c4;
border-radius: 100%;
}
.kaidata .timebox li .datatop .datetime {
display: inline-block;
margin-left: 15px;
padding-left: 12px;
padding-right: 12px;
font-size: 16px;
color: #6f6f6f;
line-height: 24px;
background: #dedede;
border-radius: 30px;
}
.kaidata .timebox li .housebox {
position: relative;
width: 250px;
float: right;
margin-top: 15px;
margin-bottom: 15px;
}
.kaidata .timebox li .housebox span {
display: block;
float: left;
font-size: 16px;
line-height: 28px;
height: 28px;
overflow: hidden;
color: #4c4c4c;
}
.kaidata .timebox li .housebox p:hover a span {
color: #ff4c4c;
}
.housebox .housname {
width: 95px;
color: #000;
}
.housebox .housprice {
width: 100px;
margin-right: 5px;
text-align: right;
}
.housebox .housplace {
width: 50px;
text-align: right;
}
/* scroll */
.mCSB_scrollTools .mCSB_draggerRail {
background: #faf9f9;
width: 6px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background: #ccc;
width: 6px;
}
.mCSB_container,
.mCustomScrollBox {
overflow: visible !important
}
</style>
</head>
<body>
<div class="kaidata">