网上实现这种功能的代码挺多的,但有个问题,网页如果放大的话,这个div会跟着放大,但不像网页的其他内容,它不能左右滑动,结果显示不全。而工作上的需求是jsp页面在手机上浏览的,这样就非常郁闷。后来换了一种方式,就是在网页一加载的时候,从窗体底部生成一个div,然后设置随着滚动条的滑动,div也自动滑动到窗体底部。同样能达到效果,而且放大后能显示完整。不过设计网页时最后得控制一下整体的最小宽度。
以下是实现的js代码:
<script> function $(id) { return document.getElementById(id); } var LoginUI = !!window.LoginUI || {}; LoginUI.getViewportWidth = function(){ var width=0; if(document.documentElement && document.documentElement.clientWidth){ width=document.documentElement.clientWidth;} else if(document.body && document.body.clientWidth){ width=document.body.clientWidth;} else if(window.innerWidth){ width=window.innerWidth-18;} return width; } LoginUI.getViewportHeight = function() { var height=0; if(window.innerHeight){ height=window.innerHeight;} else if(document.documentElement&&document.documentElement.clientHeight){ height=document.documentElement.clientHeight;} else if(document.body&&document.body.clientHeight){ height=document.body.clientHeight;} return height; } LoginUI.getViewportScrollX = function(){ var scrollX=0; if(document.documentElement&&document.documentElement.scrollLeft){ scrollX=document.documentElement.scrollLeft;} else if(document.body&&document.body.scrollLeft){ scrollX=document.body.scrollLeft;} else if(window.pageXOffset){ scrollX=window.pageXOffset;} else if(window.scrollX){ scrollX=window.scrollX;} return scrollX; } LoginUI.getViewportScrollY=function() { var scrollY=0; if(document.documentElement&&document.documentElement.scrollTop){ scrollY=document.documentElement.scrollTop;} else if(document.body&&document.body.scrollTop){ scrollY=document.body.scrollTop;} else if(window.pageYOffset){ scrollY=window.pageYOffset;} else if(window.scrollY){ scrollY=window.scrollY;} return scrollY; } function scrollMsgTip() { document.getElementById("msgtip").style.display="block"; var t = LoginUI.getViewportHeight() + LoginUI.getViewportScrollY() - $("msgtip").offsetHeight; $("msgtip").style.top = t + "px"; /* $("msgtip").style.left = LoginUI.getViewportWidth() + LoginUI.getViewportScrollX() - $("msgtip").offsetWidth + "px"; */ } function scrollTip() { scrollMsgTip(); } window.onload = scrollTip; window.onscroll = scrollTip; window.scrollTo(5, 5);//这段可以去掉,工作上的需求加上的
function initScrollA(){//再执行一次移动document.getElementById("msgtip").style.display="block";var t = LoginUI.getViewportHeight() + LoginUI.getViewportScrollY() - $("msgtip").offsetHeight; $("msgtip").style.top = t + "px"; }//以下可以去掉,工作上的需求加上的
function timeOut(){ setTimeout('initScrollA()',100); }</script>//以下可以去掉,工作上的需求加上的