首页 新闻 赞助 找找看

div+css布局的滚动条收缩问题

0
悬赏园豆:10 [已解决问题] 解决于 2010-11-09 14:16

各位高手,麻烦把下面代码复制,然后放到页面中运行一下,拉动滚动条,会发现滚动条收缩,缩得很细,请问这个怎么解决。谢谢

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2  <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script src="common.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 (function(){var ua=navigator.userAgent.toLowerCase();var is=(ua.match(/\b(chrome|opera|safari|msie|firefox)\b/)||['','mozilla'])[1];var r='(?:'+is+'|version)[\\/: ]([\\d.]+)';var v=(ua.match(new RegExp(r))||[])[1];jQuery.browser.is=is;jQuery.browser.ver=v;jQuery.browser[is]=true})();(function(jQuery){this.version='@1.5';this.layer={'width':200,'height':100};this.title='信息提示';this.time=180000;this.anims={'type':'slide','speed':600};this.timer1=null;this.inits=function(title,text){if($("#message").is("div")){return}
9 $(document.body).prepend('<div id="message" style="border:#b9c9ef 1px solid;z-index:100;width:'
10 +this.layer.width
11 +'px;height:'
12 +this.layer.height
13 +'px;position:absolute; display:none;background:#cfdef4; bottom:0; right:0; overflow:hidden;"><div style="border:1px solid #fff;border-bottom:none;width:100%;height:25px;font-size:12px;overflow:hidden;color:#1f336b;"><span id="message_close" style="float:right;padding:5px 0 5px 0;width:16px;line-height:auto;color:red;font-size:12px;font-weight:bold;text-align:center;cursor:pointer;overflow:hidden;">×</span><div style="padding:5px 0 5px 5px;width:100px;line-height:18px;text-align:left;overflow:hidden;">'
14 +title
15 +'</div><div style="clear:both;"></div></div> <div style="padding-bottom:5px;border:1px solid #fff;border-top:none;width:100%;height:auto;font-size:12px;"><div id="message_content" style="margin:0 5px 0 5px;border:#b9c9ef 1px solid;padding:10px 0 10px 5px;font-size:12px;width:'
16 +(this.layer.width-17)
17 +'px;height:'
18 +(this.layer.height-50)
19 +'px;color:#1f336b;text-align:left;overflow:hidden;line-height:150%">'
20 +text+'</div></div></div>');$("#message_close").click(function(){setTimeout('this.close()',1)});$("#message").hover(function(){clearTimeout(timer1);timer1=null},function(){if(time>0)
21 timer1=setTimeout('this.close()',time)});$(window).scroll(function(){var bottomHeight="-"+document.documentElement.scrollTop+document.body.scrollTop;$("#message").css("bottom",bottomHeight+"px")})};this.show=function(title,text,time){if($("#message").is("div")){return}
22 if(title==0||!title)
23 title=this.title;this.inits(title,text);if(time>=0)
24 this.time=time;switch(this.anims.type){case'slide':$("#message").slideDown(this.anims.speed);break;case'fade':$("#message").fadeIn(this.anims.speed);break;case'show':$("#message").show(this.anims.speed);break;default:$("#message").slideDown(this.anims.speed);break}
25 var bottomHeight="-"+document.documentElement.scrollTop;$("#message").css("bottom",bottomHeight+"px");if($.browser.is=='chrome'){setTimeout(function(){$("#message").remove();this.inits(title,text);$("#message").css("display","block")},this.anims.speed-(this.anims.speed/5))}
26 this.rmmessage(this.time)};this.lays=function(width,height){if($("#message").is("div")){return}
27 if(width!=0&&width)
28 this.layer.width=width;if(height!=0&&height)
29 this.layer.height=height}
30 this.anim=function(type,speed){if($("#message").is("div")){return}
31 if(type!=0&&type)
32 this.anims.type=type;if(speed!=0&&speed){switch(speed){case'slow':;break;case'fast':this.anims.speed=200;break;case'normal':this.anims.speed=400;break;default:this.anims.speed=speed}}}
33 this.rmmessage=function(time){if(time>0){timer1=setTimeout('this.close()',time)}};this.close=function(){switch(this.anims.type){case'slide':$("#message").slideUp(this.anims.speed);break;case'fade':$("#message").fadeOut(this.anims.speed);break;case'show':$("#message").hide(this.anims.speed);break;default:$("#message").slideUp(this.anims.speed);break};setTimeout('$("#message").remove();',this.anims.speed);this.original()}
34 this.original=function(){this.layer={'width':200,'height':100};this.title='信息提示';this.time=180000;this.anims={'type':'slide','speed':600}};jQuery.messager=this;return jQuery})(jQuery);
35
36 var url = "";var userInfo = "";var msgContent = "";
37
38 $().ready(function(){return ShowBox()});
39 function ShowBox(){
40 if(GetMsgContent()){
41 $.messager.lays(300, 200);
42 $.messager.show(0, userInfo+"<br />"+msgContent);
43 }
44 url="";userInfo="";msgContent="";delete url;delete userInfo;delete msgContent;return true
45 }
46 function GetMsgContent()
47 {//此处也可改为Ajax的json方式获取动态数据
48 userInfo="Hi,你有新的消息,请查看:"
49 msgContent+="<li>今晚一起去吃饭吧</li>";
50 return true;
51 }
52 </script>
53 </head>
54 <body>
55 <div style="height:1000px;width:100%;background:black;top:0px;left:0px;filter:alpha(opacity=30);opacity:0.3;"></div>
56 </body>
57 </html>
58

 

第一印象的主页 第一印象 | 初学一级 | 园豆:79
提问于:2010-09-02 14:18
< >
分享
最佳答案
0

代码的第 21行 把减号给去了 可以不让滚动条变小 但是它不固定在底部

bottomHeight=document.documentElement.scrollTop+document.body.scrollTop;$("#message").css("bottom",bottomHeight+"px")})};

你加上一个减号 只会让body的height变大 ;你若果想让它一直保持在底部bottom=0就行了

收获园豆:10
三月软件工作室——任忌 | 小虾三级 |园豆:524 | 2010-09-02 22:32
谢谢你的回答,我不知道设置bottom=0后,IE7、8会是什么效果,但是在IE6中我试了一下不行
第一印象 | 园豆:79 (初学一级) | 2010-09-03 08:50
我在IE7中是的它可以不改变滚动条的 就是不在底部
三月软件工作室——任忌 | 园豆:524 (小虾三级) | 2010-09-03 08:54
我在editplus中试的 也可以的
三月软件工作室——任忌 | 园豆:524 (小虾三级) | 2010-09-03 08:56
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册