当鼠标悬停在特定DIV上时，如何使整个HTML文档滚动？

我的页面包含两个垂直分区：导航分区和内容分区。我的CSS如下所示：

#nav_div{ 
    width: 300px; 
    height: 100%;
    overflow: hidden;
}

#content_div{
    position: fixed;
    top: 0; 
    left: 300px;
    overflow: auto; 
    padding: 0px 0 0 0;
}

---

我想要完成的是：如果鼠标悬停在nav_div上，用鼠标滚轮使整个页面垂直滚动，这对纯html/css不起作用。你需要javascript来完成你想要的。您可以在这里找到jQuery示例：

---

如果您想让

导航div

保持静止，它应该具有

位置：固定的
：

#nav_div{ 
    position: fixed;
    width: 300px; 
    height: 100%;
    overflow: hidden;
}

#content_div{
    position: absolute;
    top: 0; 
    left: 300px;
    overflow: auto; 
    padding: 0px 0 0 0;
}

或者：

#nav_div{ 
    position: fixed;
    width: 300px; 
    height: 100%;
    overflow: hidden;
}

#content_div{
    margin-left: 300px;
    overflow: auto; 
    padding: 0px 0 0 0;
}

无论页面内容如何，所有浏览器都应该支持鼠标滚轮的垂直滚动。你的意思是你只想滚动内容，而不是导航？请澄清。确切地说。。。我以为我的CSS显示了这一点。导航div不应滚动，而内容div应始终滚动。。。当然有了鼠标滚轮，不管鼠标指针在哪里，到底什么东西不起作用？请提供一个JSFIDLE或至少共享一些代码。