jquery.mCustomScrollbar 做pc滚动条效果

最新推荐文章于 2021-09-07 00:55:35 发布

VIP文章幽幽靖

最新推荐文章于 2021-09-07 00:55:35 发布

阅读量238

点赞数

分类专栏： css javascript html 文章标签： jquery.mCustomScrollbar

本文链接：https://blog.csdn.net/ws19900201/article/details/100930089

版权

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">

最低0.47元/天解锁文章

幽幽靖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.mCustomScrollbar 做pc滚动条效果

PC端 overflow-y:scroll 默认的滚动条有点丑，所以百度找了一个用 jquery.mCustomScrollbar 做pc滚动条效果下载文件地址：代码如下：所需jQuery等文件请自行百度下载。。<!DOCTYPE html><html><head> <title>scroll</title> &lt...
复制链接

扫一扫