minisite 自定义滚动条

html:
<div class='container'>
<div class='div_scrolls'>
需要滚动的内容
</div>
</div>

css:

scroller { position: relative; width: 620px; float: left; /border-right:1px solid #7c808f;/ padding:0 40px 40px 40px; }

.container .div_scroll { width: 100%;overflow: auto; }
.container .scroll_container { overflow: hidden; position: relative;height:800px }
.container .scroll_absolute { position: absolute; }
.container .scroll_drag { position: relative; top: 0; left: 0; cursor: pointer; background-color: #f4f3f6; border-radius: 5px; }
.container .scroll_vertical_bar { position: absolute; top: 0px; right: 8px; width:8px; height: 100%; background:#c7c4d4; background: url(../image/scroll_bg.png) repeat-y center 0; margin: 0; padding: 0; }
.container .scroll_track {border-radius: 5px; position: relative; background-color: #c7c4d4;border: 1px solid #cdcad8; }
.container .scroll_arrow { text-indent: -20000px; display: block; cursor: pointer; background-color: #369DB4; }
.container .scroll_vertical_bar .scroll_arrow { height: 16px; }

js:

需要引入mousewheel.js和easyscroll.js两js

var _h=document.body.clientHeight;
('.div_scroll,.scroll_container').css('height',_h-310);(".div_scroll").scroll_absolute({arrows:false});

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 2,053评论 0赞 1
  • Square #square{ width: 100px; height: 100px; background: ...
    情话_2ee5阅读 369评论 0赞 1
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 10,061评论 0赞 8
  • 这篇文字里我会介绍50 个便于使用的 CSS2/CSS3 代码片段给所有的WEB专业人员. 选择IDE开发环境来存...
    JamHsiao_aaa4阅读 2,178评论 0赞 3
  • 本书介绍 你是不是对Django的学习感到迷茫?是不是对网上零星的教程感到绝望?是不是苦于没有可以迅速上手的实例而...
    阡陌3536阅读 1,476评论 0赞 0

友情链接更多精彩内容