jquery使用div实现滚动条效果

 

查了些div实现滚动条的效果,看了很多,大多都不符合要求。

要求如下:

1.div大小固定,div中内容大小不固定

2.鼠标移动到内容上时,如果内容太大,则出现滚动条,并可以拖动查看,而内容宽度不变。否则不显示滚动条。

 

如果纯粹的使用div的overflow-y:scroll,那么内容的宽度会变小。

 

废话不多说,直接上代码。

文章中导入jquery-1.4.1.min.js

 

js代码如下:

 

Js代码代码

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>  

<script type="text/javascript">  

    var check = false;//是否可移动

    $(document).ready(function(){ 

        var h = $("#scrollContent").height(); 

        var ih = $("#divcontent").height(); 

        var mh = parseInt(h*h/ih); 

        var h1 = parseInt($("#ypThumbContainer").height())-mh;//图片与div的高度差值

        var h2 = parseInt(ih - h);//内容与边框div的高度差值

         

        $("#scrollContent").hover(function(){ 

                if(ih > h){ 

                    $("#ypThumbContainer").show("slow"); 

                    $("#ypThumb").find("img").height(mh); 

                    $("#ypThumb").show("slow"); 

 

                    //begin 

                    var oDiv = document.getElementById("ypThumbContainer"); 

                    var oDiv2 = document.getElementById("ypThumb"); 

                    var mouseStart={}; 

                    var divStart={}; 

                    var rightStart={}; 

                    var bottomStart={}; 

                     

                    $(oDiv2).mousedown(function(ev){ 

                        var oEvent = ev||event; 

                        mouseStart.x = oEvent.clientX; 

                        mouseStart.y = oEvent.clientY; 

                        divStart.x = parseInt($(oDiv2).css("left")); 

                        divStart.y = parseInt($(oDiv2).css("top")); 

                         

                         

                        if(oDiv2.setCapture){ 

                            oDiv2.setCapture(); 

                            oDiv2.onmousemove = doDrag3; 

                            oDiv2.onmouseup = stopDrag3; 

                        }else{ 

                            $(oDiv).bind("mousemove",doDrag3).bind("mouseup",stopDrag3); 

                        } 

                        oEvent.preventDefault(); 

                    }); 

                     

                    function doDrag3(ev) { 

                        var oEvent = ev||event; 

                        var t = oEvent.clientY-mouseStart.y+divStart.y; 

                        if(t < 0){ 

                            t = 0; 

                             

                        }else if(t >= $(oDiv).height()-$(oDiv2).height()){ 

                            t = $(oDiv).height()-$(oDiv2).height(); 

                        } 

                        $(oDiv2).css("top",t+"px"); 

                        $("#divcontent").css("top",-(t*h2/h1)+"px"); 

                    } 

                     

                    function stopDrag3(){ 

                        if(oDiv2.releaseCapture){ 

                            oDiv2.releaseCapture(); 

                            oDiv2.onmousemove = null; 

                            oDiv2.onmouseup = null; 

                        }else{ 

                            $(oDiv).unbind("mousemove",doDrag3).unbind("mouseup",stopDrag3); 

                        } 

                    } 

                    //end 

                } 

            },function(){ 

                $("#ypThumbContainer").hide("slow"); 

                $("#ypThumb").hide("slow"); 

         }); 

    }); 

 

 

</script> 

 

 

html代码如下:

 

Html代码代码

<div style="width:150px;overflow:hidden;height:170px;border:1px #000 solid;z-index:1; position:relative;" id="scrollContent"> 

    <div class="thumbContainer" id="ypThumbContainer" style="Z-INDEX: 3; right:0px; WIDTH: 9px; POSITION: absolute; TOP: 0px; HEIGHT: 170px;border:1px #000 solid; display:none"> 

      <div class="thumb" id="ypThumb" style="POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ffd200;"> 

        <img class="thumbImg" id="ypThumbImg" height="50" src="images/thumb.gif" width="9" style="cursor:pointer;"/><br /> 

        </div> 

    </div> 

    <div id="divcontent" style="position:absolute;"> 

    中新网8月12日电 据最高人民法院网站消息,最高人民法院新闻发言人孙军工今日介绍,新婚姻法首次明确离婚案件中一方婚前贷款购买的不动产应归产权登记方所有,但应对参与还贷的配偶给予公平合理的补偿。

    </div> 

</div>   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值