自定义滚动效果

CustomScrollBar

自定义滚动条，实现了鼠标点击滚动，滑轮滚动，可自定义滚动速度，滚动条样式。
同时此插件还实现了tab标签锚点跳转，监听锚点位置的功能

usage

调用scroll.js插件，加载进HTML页面，创建CusScrollBar()对象，并添加插件参数

var scroll = new CusScrollBar({    contSelector   : ".scroll-cont",   // 滑动内容区选择器(必须)    barSelector    : ".scroll-bar",    // 滑动条选择器（必须）    sliderSelector : ".scroll-slider", // 滑动快选择器（必须）    tabItemSelector: ".tab-item",      // 标签项    tabActiveClass : "tab-active",     //选中动作类名    anchorSelector : ".anchor",        //锚点选择    correctSelector: ".correct-bot",   //校正元素    articleSelector: ".scroll-ol",     //获取文章    wheelStep      : 20,               //添加滚动步幅（必须）});

对应的HTML代码结构：

<div class="scroll-wrap">    <!-- 滚动内容 -->    <div class="scroll-cont">    </div>    <!-- 滚动条 -->    <div class="scroll-bar">        <!-- 滚动滑块 -->        <div class="scroll-slider"></div>    </div></div>

查看详细的代码，可查看对文章内容进行锚点链接，通过点击标签跳转到指定位置

对应的CSS代码中要注意对scroll-wrap的position属性要用相对定位，scroll-bar,scroll-slider要用绝对定位。

其他样式可根据自己的界面设计自行添加样式。

compatibility

• Firefox
• chrome
• IE8+
• Opera

项目代码：https://github.com/DoGuangHan/CustomScrollBar.git