jQuery,自定义滚动条

目的:用js模拟实现滚动条,从而达到设计图以及产品要求的效果……
原理:伴随着父级容器overflow,控制绝对容器的left,top值,从而达到效果。

在线代码地址:http://runjs.cn/code/agzuqcdh

在线测试地址:http://sandbox.runjs.cn/show/agzuqcdh

html代码

 1 <div id="show">
 2             <!--内容区域-->
 3             <div id="container">
 4                 <p>1326546478797897987</p>
 5                 <p>1326546478797897987</p>
 6                 <p>1326546478797897987</p>
 7                 <p>1326546478797897987</p>
 8                 <p>1326546478797897987</p>
 9                 <p>1326546478797897987</p>
10                 <p>1326546478797897987</p>
11                 <p>1326546478797897987</p>
12                 <p>1326546478797897987</p>
13                 <p>1326546478797897987</p>
14                 <p>1326546478797897987</p>
15                 <p>1326546478797897987</p>
16                 <p>1326546478797897987</p>
17                 <p>1326546478797897987</p>
18                 <p>1326546478797897987</p>
19                 <p>1326546478797897987</p>
20             </div>
21
22             <!--滚动条区域-->
23             <div id="sctollCon">
24                 <div id="sctollDo"></div>
25             </div>
26         </div>

js代码:

ScorllTop({
    "show":$("#show"),//可视区域
    "container":$("#container"),//内容区域
     "scroll":$("#sctollCon"),//滚动条区域
     "scrollDo":$("#sctollDo")//滚动条

});

//竖向的滚动条,四个参数,jQuery对象,
// {
//     "show":,//可视区域
//     "container":,//内容区域
//     "scroll":,//滚动条区域
//     "scrollDo"://滚动条
// }
function ScorllTop($obj){
    var $container = $obj.show,//可视区域
        $contanr   = $obj.container,//内容区域
        $conScroll = $obj.scroll,//滚动条活动区域
        $sroll     = $obj.scrollDo,//滚动条
        startY     = 0,//开始位置
        lastY      = 0,//结束位置
        YN         = false,
        bBtn       = true;//判断滚动条上滚还是下滚

        $container.mouseover(function(){
            if ( $contanr.height() > $container.height() ) {
                $conScroll.show();
                //初始化滚动条的高度
                   $sroll.height($container.height()*$conScroll.height()/$contanr.height());
                //添加拖动事件
                addEvent($sroll[0],‘mousedown‘,mouseDown);
                //添加滚动条事件
                addEvent($contanr[0],‘DOMMouseScroll‘,mouseMove);
                addEvent($conScroll[0],‘DOMMouseScroll‘,mouseMove);
                $contanr[0].onmousewheel = MouseScr;
                $conScroll[0].onmousewheel = MouseScr;
            }else{
                $contanr.css({‘top‘:0});
                $sroll.css({‘top‘:0});
            }
        });

        $container.mouseout(function(){
            $conScroll.hide();
        });

        function mouseDown(e){
            startY = e.clientY - this.offsetTop;
            this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象
            console.log(startY);
            addEvent(document,‘mousemove‘,mouseMove);
            addEvent(document,‘mouseup‘,mouseUp);
            return false;
        }

        function mouseMove(e){
            var maxVal = $conScroll.height() - $sroll.height();//最大值
            this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象
            lastY = e.clientY - startY;
            lastY = lastY < 0 ? 0 :lastY;
            lastY = lastY > maxVal ? maxVal : lastY;

            $sroll.css({‘top‘:lastY+‘px‘});
            $contanr.css({‘top‘:-$conScroll.height()*lastY/$sroll.height()});
            return false;
        }

        function mouseUp(){
            console.log(‘取消事件‘);
            removeEvent(document,‘mousemove‘,mouseMove);
            removeEvent(document,‘mouseup‘,mouseUp);
            return false;
        }

        function MouseScr(ev){
            var ev = ev || window.event,
              TopY = 0;
            if(ev.detail){
                bBtn = ev.detail>0  ?  true : false;
            }
            else{
                bBtn = ev.wheelDelta<0  ?  true : false;
            }
            if(bBtn){   //下
                TopY = $contanr.position().top-10;
            }
            else{  //上
                TopY = $contanr.position().top+10;
            }
            var maxTop = $contanr.outerHeight()-$container.outerHeight();
            TopY = TopY > 0 ? 0 : TopY;
            TopY = TopY < -maxTop ? -maxTop : TopY;

            $contanr.css({‘top‘:TopY+‘px‘});
            $sroll.css({‘top‘:$sroll.height()*Math.abs(TopY)/$conScroll.height()+‘px‘});

            if(ev.preventDefault){
                ev.preventDefault();
            }
            else{
                return false;
            }
        }
}
//ScorllTop end!

//拖拽活动层,拖拽的区域,活动的区域,最大活动区域,默认是window
function dragConFun(obj){
    var $dragDo  = obj.dragObj,//拖拽触发点
        $dragCon = obj.activeObj,//拖拽的大容器
        $dragMax = obj.maxCon || $(window),//最大的容器,默认是window

        //拖拽容器的大小
        dragWidth  = $dragCon.outerWidth(),//拖拽容器的
        dragHeight = $dragCon.outerHeight(),
        //最大活动范围
        maxWidth   = $dragMax.width() - dragWidth,
        maxHeight  = $dragMax.height() - dragHeight,
        //操作变量
        startX     = 0,
        startY     = 0,

        a;

    addEvent($dragDo[0],‘mousedown‘,mouseDoun);

    function mouseDoun(e){
        startX = e.clientX - $dragCon[0].offsetLeft;
        startY = e.clientY - $dragCon[0].offsetTop;
        this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象

        $("body").css({
            ‘cursor‘:"move"
        });
        addEvent(document,‘mousemove‘,mouseMove);
        addEvent(document,‘mouseup‘,mouseUp);
        return false;
    };

    function mouseMove(e){
        var endX       = 0,
            endY       = 0;

        endX = e.clientX - startX;
        endY = e.clientY - startY;
        endX = endX < 0 ? 0 : endX;
        endX = endX > maxWidth ? maxWidth : endX;
        endY = endY < 0 ? 0 : endY;
        endY = endY > maxHeight ? maxHeight : endY;

        $dragCon.css({
            ‘left‘:endX,
            ‘top‘:endY
        });
        return false;
    };

    function mouseUp(){
        $("body").css({
            ‘cursor‘:"auto"
        });
        removeEvent(document,‘mousemove‘,mouseMove);
        removeEvent(document,‘mouseup‘,mouseUp);
        return false;
    };

    if (obj.clickother) {
        //非目标区域,隐藏
        $(document).mouseup(function(e){
            var _con = $dragCon;   // 设置目标区域
            if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
              $dragCon.hide();
           }
        });
    };

}//dragConFun end!

//添加监听事件
function addEvent( obj, type, fn ) {
    if ( obj.attachEvent ) {
        obj[‘e‘+type+fn] = fn;
        obj[type+fn] = function(){obj[‘e‘+type+fn]( window.event );}
        obj.attachEvent( ‘on‘+type, obj[type+fn] );
    } else{
        obj.addEventListener( type, fn, false );
    } 

}
//移除监听事件
function removeEvent( obj, type, fn ) {
    if ( obj.detachEvent ) {
        obj.detachEvent( ‘on‘+type, obj[type+fn] );
        obj[type+fn] = null;
    } else {
        obj.removeEventListener( type, fn, false );
    }
}
时间: 2024-10-25 06:06:30

jQuery,自定义滚动条的相关文章

jQuery自定义滚动条样式插件mCustomScrollbar

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus

jQuery自定义滚动条插件mCustomScrollbar

写项目的时候遇到了这种情况 我用了两个iframe,左边是一个菜单栏,可以展开也可以收回去的.就说这个滚动条太丑了,是浏览器默认的,所以学着用mCustomScrollbar来解决一下这个问题. 1:资源下载 https://github.com/malihu/malihu-custom-scrollbar-plugin,我是从这里下载的. 2:引入 注意顺序. <link rel="stylesheet" type="text/css" href="

Jquery自定义滚动条插件

下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js <script src="jquery.nicescroll.js"></script> $(document).ready( function() { $("html").niceScroll(); } ); var nice = false; $(document).ready( function

jQuery自定义滚动条样式插件mCustomScrollbar 兼容IE7的方法

Here is what is in my ie7.css:.mCSB_scrollTools .mCSB_draggerRail{width:2px;height:100%;margin:0 0 0 -1px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;left: 50%;position: absolute;}.mCSB_scrollTools .mCSB_buttonDown{top: auto

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus

利用CSS3新特性实现完全兼容的自定义滚动条。

背景:最近项目里面因为统一页面风格,用到了自定义滚动条,在完成之前的那个滚动条的时候,与网上各个滚动条插件实现的方法类似,相当于造了轮子,通过css3的 网上看到的滚动条插件多数是通过监听内容的滚动事件,由于原生js的滚动事件存在一些bug,所以实际上用jQuery的mousewheel.js插件的比较多,自己做的滚动条也是引用了该插件. 首先说一说自定义滚动条实现的普遍步骤和方法: 背景: A需要滚动. 1.给A添加一个父级S包裹,并将B进行绝对或相对定位(这点根据S的定位,目的是为了保持原有

自定义滚动条

<!DOCTYPE HTML><html><head><title>自定义滚动条</title><meta charset="UTF-8"><link rel="stylesheet" href="reset.css" type="text/css" /><script type="text/javascript" s

基于jQuery的滚动条插件-jquery.jscrollbar

jquery.jscrollbar 是一个基于jQuery的滚动条插件,支持水平滚动条和垂直滚动条,支持鼠标键盘事件 主要功能 支持水平滚动条 支持垂直滚动条 自动判断水平滚动条和垂直滚动条是否显示 支持外部调用来滚动内容 支持滚动条部分样式自定义 支持键盘方向键控制 支持鼠标滚动(需要mousewheel插件) 支持滚动条显示位置设置(外部|悬浮) 支持手动更新界面 依赖的库 jQuery (http://jquery.com/) jquery.jqdrag (https://github.c

mCustomScrollbar插件自定义滚动条

系统自定义 的滚动条是超级丑的有木有,为了网站的风格统一,需要有自定义的滚动下拉条,自己封装函数又累又难,今天给大家一款炒鸡好用的自定义下拉条插件~(百度云有完整demo,可以下载下来参考) demo在百度云:http://pan.baidu.com/s/1nutdP9J 可以先看一下这个插件可以选择的样式,http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html 1.如

自定义滚动条mCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等. 1.如何使用 mCustomScrollbar(必须要加载如下的4个文件) jquery.mCustomScro