http://hi.baidu.com/%D4%AC%BC%AA%BA%BD/blog/item/ce69b137a03aecd4a2cc2b65.html
在做WebGis时要实现用鼠标的中轴来控制地图的放大缩小,但是当鼠标在IFRAME里面上下滚动的时候,整个页面都跟随者上下滚动了,达不到理想的效果,试了N种办法,无解。
经过千辛万苦的实验,终于找到了解决方法,需要为JS添加一个事件,当鼠标在Iframe页面里面滚动的的时候,使父窗口滚动禁用。代码如下:
鼠标滚动事件代码:
function sdZoom()
{
//alert(event.wheelDelta);
window.top.topmapFrame.focus(); //首先使Iframe获得焦点
var strDate = new Date();
if(event.wheelDelta>=120) //向上滚动鼠标事件
{//放大
eval(zoomIn); //js控制放大
}
else if(event.wheelDelta<=-120) //向下滚动鼠标事件
{
eval(zoomOut); //js控制缩小
}
}
以上是实现了js控制鼠标滚动放大缩小的功能,最主要的代码在下面,不让父窗口跟随滚动,在Iframe里面连接的页面里面加上如下的JS代码;
<script type="text/javascript">
if(document.addEventListener)
{
document.addEventListener("DOMMouseScroll",function(e){
e.preventDefault();
},false);
}
else{
document.onmousewheel = function(){
event.returnValue = false;
};
}
</script>
哈哈,问题解决