关于IE下滚动条的问题.docxVIP

关于IE下滚动条的问题2009-01-14 10:20?1672人阅读?评论(0)?收藏?举报如何让IE下的滚动条在内容少的时候隐藏得更彻底呢？滚动条的出现使固定的有限空间能够展示更多的内容。但是当展示内容很少的时候，滚动条还需要吗？这个情况下,Firefox会将滚动条隐藏得很彻底，但是，IE做不到这样，还留有滚动条的灰色痕迹。对比图如下：Firefox 3.0.1:IE7为例，IE6是同样的状况：解决这个问题，采用body scroll=no的方法不妥，将使这个窗口始终没有滚动条，多出的内容会被隐藏，看不到。我们需要这样的一种解决方案：当展示内容没有超出当前窗口范围时，将滚动条隐藏得无影无踪（就像FF做得到的那样）；当内容超出当前窗口范围时，滚动条要出来发挥作用（scroll=no）没做到。采用JS实现的完整代码如下：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadtitle解决IE下的滚动条显示与隐藏的自适应/titlemeta http-equiv=content-type content=text/html; charset=utf-8 /meta name=keywords content= /meta name=description content= /link rel=stylesheet type=text/css media=screen href= mce_href= /stylebody{margin:0;padding:0;}/style/headbodydivptesttesttesttesttesttesttesttesttestte ssttesttesttesttes testtesttestte sttestte sttesttestt esttest/pptest/pptest/pptest/pptest/pptest/pptest/pptest/pptest/p/div/body/htmlSCRIPT LANGUAGE=JavaScript!--function autoScrollResize() {var content_h = document.body.clientHeight; // 内容高度var content_w = document.body.clientWidth;var broswer_h = document.documentElement.clientHeight; // 浏览器窗口的可视高度var broswer_w = document.documentElement.clientWidth;if(content_h broswer_h content_w broswer_w) {document.getElementsByTagName(body)[0].style.overflow = hidden;document.getElementsByTagName(html)[0].style.overflow = hidden; // 在DTD标准下，为html元素设置overflow:hidden才能去掉滚动条} else{document.getElementsByTagName(html)[0].style.overflow = auto;}}window.onload = function() {if(window.ActiveXObject) { // 针对IEautoScrollResize();window.attachEvent(onresize, autoScrollResize); // 使用ie的resize时事件监听}}//--/SCRIPT对代码进行的简要分析如下：只是需要对IE做这个调整，if(window.ActiveXObject)只对IE起作用。onresize事件保证了在窗口缩放的时候，能够对内容是否超出窗口范围进行判断。这个事件的监听需要使用到window.attachEvent()方式才对IE起作用。document.body.clientHeight获得展示内容的高度，document.documentElement.clientHeight获得浏览器窗口的高度。一般情况下，给body标签加上“overflow:hidden”属性即可，但好像不起作用，原因在于文档头引入了DTD标准，这个时候需要给html标签设置“overflow:hidden”属性，这样就可以完全隐藏滚动条了。至此，解决，附图一张：??1、完全隐