鼠标移动到div上时页面滚动无效，滚轮只用于该div,移出div时滚轮只用于body.

div滚动

解决方案 »

  1.   

    用两个div就可以解决
    <div style="width:100%;">
      <div style="width:2000px;"></div>
    </div>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    div{
    width:300px;
    }
    #test1{
    height:300px;
    overflow:auto;
    background-color:#F00;
    }
    #test2{
    height:400px;
    background-color:#0F0;
    }
    #test3{
    height:500px;
    background-color:#00F;
    }
    #test{
    height:500px;
    background-color:#00F;
    }
    </style>
    </head><body>
    <div id="test"></div>
    <div id="test1">
    <div id="test2"></div>
    </div>
    <div id="test3"></div>
    <script type="text/javascript">
    document.getElementById('test1').onmouseover=function(){
    document.documentElement&&(document.documentElement.style.overflow='hidden');
    document.body.style.overflow='hidden';
    }
    document.getElementById('test1').onmouseout=function(){
    document.body.style.overflow='auto';
    document.documentElement&&(document.documentElement.style.overflow='auto');
    }
    </script>
    </body>
    </html>