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

【问题标题】：How can I make the entire HTML document scroll when the mouse is hovering over a specific DIV?当鼠标悬停在特定 DIV 上时，如何使整个 HTML 文档滚动？
【发布时间】：2015-03-15 21:44:53
【问题描述】：

我的页面包含两个垂直 DIVS：nav_div 和 content_div。我的 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 上，则使整个页面垂直滚动用鼠标滚轮

【问题讨论】：

所有浏览器都应该支持鼠标滚轮的垂直滚动，无论页面内容如何。你的意思是你只希望 content_div 滚动，而不是 nav_div？请澄清。
完全正确...我认为我的 CSS 显示了这一点。 nav_div 永远不应该滚动，而 content_div 应该总是滚动...当然是用鼠标滚轮，不管鼠标指针在哪里

标签： html css mousewheel

【解决方案1】：

这不适用于纯 html/css。你需要 javascript 来完成你想要的。你可以在这里找到一个 jQuery 示例： https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

【讨论】：

究竟是什么不起作用？请提供一个 jsfiddle 或至少分享一些代码。

【解决方案2】：

如果您希望nav_div 保持静止，则应该是position:fixed：

#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;
}

【讨论】：