html左侧文章滚动条

载入文件

在HTML head里面载入jquery.js、nicescroll.js

html

<div class="list" id="content">
  <ul>
    <li> <a href=""></a>
      <div class="thumb fl"><a href=""><img src="/case-html/images/each/s-1.jpg" /></a></div>
      <div class="art-info fr">
        <h6><a href="">春季长款</a></h6>
        <div class="time"><i class="fa fa-clock-o"></i>2020-01-11</div>
      </div>
    </li>
    <li> <a href=""></a>
      <div class="thumb fl"><a href=""><img src="/case-html/images/each/s-2.jpg" /></a></div>
      <div class="art-info fr">
        <h6><a href="">春季长款</a></h6>
        <div class="time"><i class="fa fa-clock-o"></i>2020-01-11</div>
      </div>
    </li>
    <li> <a href=""></a>
      <div class="thumb fl"><a href=""><img src="/case-html/images/each/s-3.jpg" /></a></div>
      <div class="art-info fr">
        <h6><a href="">春季长款</a></h6>
        <div class="time"><i class="fa fa-clock-o"></i>2020-01-11</div>
      </div>
    </li>
    <li> <a href=""></a>
      <div class="thumb fl"><a href=""><img src="/case-html/images/each/s-4.jpg" /></a></div>
      <div class="art-info fr">
        <h6><a href="">春季长款</a></h6>
        <div class="time"><i class="fa fa-clock-o"></i>2020-01-11</div>
      </div>
    </li>
    <li> <a href=""></a>
      <div class="thumb fl"><a href=""><img src="/case-html/images/each/s-5.jpg" /></a></div>
      <div class="art-info fr">
        <h6><a href="">春季长款</a></h6>
        <div class="time"><i class="fa fa-clock-o"></i>2020-01-11</div>
      </div>
    </li>
  </ul>
</div>

css

a{text-decoration:none;}
.fl{float: left;}
.fr{float: right;}
.list{ width: 252px; height: 400px; overflow: hidden; border: 1px solid #f1f1f1; position: absolute; top: 190px; right: 80px;}
.list ul li{ margin-bottom: 10px; border-bottom: 1px solid #e5e5e5; padding-top: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; padding-bottom: 10px; }
.list ul li .thumb{ width:40%; margin-right:3%;}
.list ul li .thumb img{ width: 100%;}
.list ul li .art-info{ width:57%;}
.art-info h6{ font-size:12px; font-weight:400; line-height:1.2; margin-bottom:10px; margin-top: 0; color:#999;}
.art-info h6 a{color: #999;}
.art-info .time{ text-align:right; color:#666; font-size: 12px;}
.art-info i{ margin-right: 5px;}

js

$('#content').niceScroll({
   cursorcolor: "#ccc",//#CC0071 光标颜色
   cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
   touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
   cursorwidth: "5px", //像素光标的宽度
   cursorborder: "0", //   游标边框css定义
   cursorborderradius: "5px",//以像素为光标边界半径
   autohidemode: false //是否隐藏滚动条
});