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
最佳答案
0
代码的第 21行 把减号给去了 可以不让滚动条变小 但是它不固定在底部
bottomHeight=document.documentElement.scrollTop+document.body.scrollTop;$("#message").css("bottom",bottomHeight+"px")})};
你加上一个减号 只会让body的height变大 ；你若果想让它一直保持在底部bottom=0就行了
收获园豆：10
谢谢你的回答，我不知道设置bottom=0后，IE7、8会是什么效果，但是在IE6中我试了一下不行
我在IE7中是的它可以不改变滚动条的 就是不在底部
我在editplus中试的 也可以的
