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>

哈哈,问题解决