html鼠标滚动固定距离,如何让鼠标移动到某个dom上时，可以滚动这个dom，而不是滚动整个页面？...

有一个一直困扰我的问题，页面如下，是一个简单的html代码生成的页面。页面就是body标签中包含一个div，我人为的让body超出可以滚动，让div内容也超出可以滚动。

此时页面的效果是：当你的鼠标在div之外的时候，你滚动页面，整体页面跟着滚动，当你的鼠标移动到div上的时候，滚动鼠标滚轮，此时滚动的是这个div。

这个是我想要的效果，这样才是合理的，写一个普通的页面默认是这样的效果了，问题来了，在一个复杂的页面中，多个div，下拉框等，经常失去这个效果，你的滚动就会滚动整个页面，必须要鼠标点击想滚动的div滚动条，才能滚动这个div。

所以我想问的是，影响这个操作的是什么，想百度一下都不知道怎么搜索。因为默认效果就是对的，而页面复杂的时候会失去这个效果(用一些别人的插件，比如下拉选择等，是有这个效果的)。

我猜想应该是可以控制这样的行为的。有大佬路过指导一下，要查询哪方面的知识，或者应该怎么做？

该页面代码，浏览器Chrome

我是一个容器