javascript - 使用 jQuery 让鼠标滚动子 div，即使它在父 div 内
问题描述
我有一个父 div 和一个子可滚动 div。
我可以知道如何（使用jQuery）当鼠标进入父div时，滚轮将滚动子div而不是body页面？
我只知道我可以对父 div 使用鼠标悬停，但是我不知道我应该写什么才能使滚轮在子 div 中起作用。
.parent-div {
padding: 9%;
width: 50%;
background-color: blue;
color: #fff;
margin: 0 auto;
}
.child-div {
width: auto;
height: 100px;
overflow: auto;
padding: 0 5%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div">
<h3>PARENT BOX</h3>
<section class="child-div">
<p style="font-weight: bold;">Nam quis mauris euismod, scelerisque sem sed, tempus erat. Duis est ligula, consequat scelerisque porttitor non, sollicitudin id nisi. Nunc efficitur interdum enim a sagittis. Curabitur fringilla, diam ac suscipit semper, lorem sapien efficitur lectus, id interdum libero lacus sed massa. Nulla eget velit eget nibh hendrerit vulputate. Donec eu lacus et tortor consequat gravida non id nulla. Etiam id augue non felis facilisis elementum. Suspendisse non tempor ligula. Mauris non elit in urna accumsan faucibus. Aliquam sed lorem sed orci efficitur fringilla. Ut facilisis consequat malesuada. In ut augue venenatis, ullamcorper orci id, malesuada nulla. Nulla vitae erat eros. Mauris malesuada ante id dolor efficitur bibendum.</p>
<p style="font-weight: bold;">Nam quis mauris euismod, scelerisque sem sed, tempus erat. Duis est ligula, consequat scelerisque porttitor non, sollicitudin id nisi. Nunc efficitur interdum enim a sagittis. Curabitur fringilla, diam ac suscipit semper, lorem sapien efficitur lectus, id interdum libero lacus sed massa. Nulla eget velit eget nibh hendrerit vulputate. Donec eu lacus et tortor consequat gravida non id nulla. Etiam id augue non felis facilisis elementum. Suspendisse non tempor ligula. Mauris non elit in urna accumsan faucibus. Aliquam sed lorem sed orci efficitur fringilla. Ut facilisis consequat malesuada. In ut augue venenatis, ullamcorper orci id, malesuada nulla. Nulla vitae erat eros. Mauris malesuada ante id dolor efficitur bibendum.</p>
</section>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec posuere dui, ut ullamcorper elit. Curabitur lectus turpis, porta quis urna eget, posuere commodo dui. Vestibulum auctor, neque nec rhoncus imperdiet, elit risus rhoncus ante, vel porta sem nibh eget lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor ipsum, tincidunt nec blandit id, malesuada a tellus. Vestibulum nec commodo magna, ac interdum lectus. Sed mollis dictum magna, at volutpat mi imperdiet ut. Integer porttitor, augue a finibus posuere, libero diam pellentesque tortor, non faucibus nisi erat sed dolor. Phasellus dignissim gravida nulla nec pulvinar. Pellentesque turpis nunc, aliquam vel arcu eu, interdum venenatis felis. Donec sit amet nibh lectus. Sed mattis facilisis arcu, vitae ultricies turpis pellentesque quis.
Nam quis mauris euismod, scelerisque sem sed, tempus erat. Duis est ligula, consequat scelerisque porttitor non, sollicitudin id nisi. Nunc efficitur interdum enim a sagittis. Curabitur fringilla, diam ac suscipit semper, lorem sapien efficitur lectus, id interdum libero lacus sed massa. Nulla eget velit eget nibh hendrerit vulputate. Donec eu lacus et tortor consequat gravida non id nulla. Etiam id augue non felis facilisis elementum. Suspendisse non tempor ligula. Mauris non elit in urna accumsan faucibus. Aliquam sed lorem sed orci efficitur fringilla. Ut facilisis consequat malesuada. In ut augue venenatis, ullamcorper orci id, malesuada nulla. Nulla vitae erat eros. Mauris malesuada ante id dolor efficitur bibendum.
Mauris pharetra ex ipsum, eu ullamcorper metus dignissim porttitor. Curabitur sed lectus lobortis, ultricies ante vitae, posuere nisl. Sed varius risus sed neque semper, sit amet commodo turpis mattis. Pellentesque tempus pulvinar rhoncus. Cras et consequat leo. Phasellus sollicitudin in dolor vitae lacinia. Nullam tristique ipsum vitae nibh ullamcorper, vel lacinia tellus consectetur. Fusce aliquet metus nec urna accumsan, ac blandit nibh imperdiet. Mauris vel nibh eu leo condimentum molestie. Nulla consequat rutrum viverra. Ut id venenatis tellus.
Phasellus dolor metus, finibus ac cursus semper, porttitor sed erat. Cras pharetra sem ut ante dictum, nec pretium ipsum hendrerit. Fusce sit amet sem ut metus sodales rhoncus in sed dolor. Phasellus ultrices eleifend velit ut luctus. Nulla vel diam quis sapien viverra hendrerit non eget lorem. Aenean imperdiet varius lacus sed dictum. Sed lacus purus, commodo ac magna a, vestibulum cursus neque. Proin tempus, purus eu sodales posuere, urna ipsum scelerisque enim, eu tincidunt lacus neque eu nulla. Donec at enim ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue nec leo hendrerit convallis. Praesent diam felis, convallis sed libero eget, sollicitudin suscipit mauris. Sed in bibendum velit. Nulla facilisi.
Cras in blandit nunc, eget lacinia elit. Pellentesque non mi non dolor euismod dignissim. Suspendisse et tincidunt libero, at vulputate sem. Nullam convallis viverra dapibus. Phasellus dictum ullamcorper quam at accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum in mi eget ligula porttitor venenatis. Nullam sed enim a tellus bibendum varius. Nullam ullamcorper finibus tortor at lobortis. Cras quis dolor justo. Aliquam luctus faucibus ante, ornare aliquet libero maximus sed.
</p>解决方案
您可以在然后相应地滚动监听wheel事件。.parent-div.child-div
这使您可以指向父 div（蓝色框）而不指向子 div（蓝色框内的可滚动部分）并使用滚轮。
$(".parent-div").on("wheel", function(e) {
var child = $(this).find(".child-div");
child.scrollTop(child.scrollTop() - e.originalEvent.wheelDelta);
return false;
});.parent-div {
padding: 9%;
width: 50%;
background-color: blue;
color: #fff;
margin: 0 auto;
}
.child-div {
width: auto;
height: 100px;
overflow: auto;
padding: 0 5%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div">
<h3>PARENT BOX</h3>
<section class="child-div">
<p style="font-weight: bold;">Nam quis mauris euismod, scelerisque sem sed, tempus erat. Duis est ligula, consequat scelerisque porttitor non, sollicitudin id nisi. Nunc efficitur interdum enim a sagittis. Curabitur fringilla, diam ac suscipit semper, lorem sapien efficitur lectus, id interdum libero lacus sed massa. Nulla eget velit eget nibh hendrerit vulputate. Donec eu lacus et tortor consequat gravida non id nulla. Etiam id augue non felis facilisis elementum. Suspendisse non tempor ligula. Mauris non elit in urna accumsan faucibus. Aliquam sed lorem sed orci efficitur fringilla. Ut facilisis consequat malesuada. In ut augue venenatis, ullamcorper orci id, malesuada nulla. Nulla vitae erat eros. Mauris malesuada ante id dolor efficitur bibendum.</p>
<p style="font-weight: bold;">Nam quis mauris euismod, scelerisque sem sed, tempus erat. Duis est ligula, consequat scelerisque porttitor non, sollicitudin id nisi. Nunc efficitur interdum enim a sagittis. Curabitur fringilla, diam ac suscipit semper, lorem sapien efficitur lectus, id interdum libero lacus sed massa. Nulla eget velit eget nibh hendrerit vulputate. Donec eu lacus et tortor consequat gravida non id nulla. Etiam id augue non felis facilisis elementum. Suspendisse non tempor ligula. Mauris non elit in urna accumsan faucibus. Aliquam sed lorem sed orci efficitur fringilla. Ut facilisis consequat malesuada. In ut augue venenatis, ullamcorper orci id, malesuada nulla. Nulla vitae erat eros. Mauris malesuada ante id dolor efficitur bibendum.</p>
</section>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec posuere dui, ut ullamcorper elit. Curabitur lectus turpis, porta quis urna eget, posuere commodo dui. Vestibulum auctor, neque nec rhoncus imperdiet, elit risus rhoncus ante, vel porta sem nibh eget lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor ipsum, tincidunt nec blandit id, malesuada a tellus. Vestibulum nec commodo magna, ac interdum lectus. Sed mollis dictum magna, at volutpat mi imperdiet ut. Integer porttitor, augue a finibus posuere, libero diam pellentesque tortor, non faucibus nisi erat sed dolor. Phasellus dignissim gravida nulla nec pulvinar. Pellentesque turpis nunc, aliquam vel arcu eu, interdum venenatis felis. Donec sit amet nibh lectus. Sed mattis facilisis arcu, vitae ultricies turpis pellentesque quis.
Nam quis mauris euismod, scelerisque sem sed, tempus erat. Duis est ligula, consequat scelerisque porttitor non, sollicitudin id nisi. Nunc efficitur interdum enim a sagittis. Curabitur fringilla, diam ac suscipit semper, lorem sapien efficitur lectus, id interdum libero lacus sed massa. Nulla eget velit eget nibh hendrerit vulputate. Donec eu lacus et tortor consequat gravida non id nulla. Etiam id augue non felis facilisis elementum. Suspendisse non tempor ligula. Mauris non elit in urna accumsan faucibus. Aliquam sed lorem sed orci efficitur fringilla. Ut facilisis consequat malesuada. In ut augue venenatis, ullamcorper orci id, malesuada nulla. Nulla vitae erat eros. Mauris malesuada ante id dolor efficitur bibendum.
Mauris pharetra ex ipsum, eu ullamcorper metus dignissim porttitor. Curabitur sed lectus lobortis, ultricies ante vitae, posuere nisl. Sed varius risus sed neque semper, sit amet commodo turpis mattis. Pellentesque tempus pulvinar rhoncus. Cras et consequat leo. Phasellus sollicitudin in dolor vitae lacinia. Nullam tristique ipsum vitae nibh ullamcorper, vel lacinia tellus consectetur. Fusce aliquet metus nec urna accumsan, ac blandit nibh imperdiet. Mauris vel nibh eu leo condimentum molestie. Nulla consequat rutrum viverra. Ut id venenatis tellus.
Phasellus dolor metus, finibus ac cursus semper, porttitor sed erat. Cras pharetra sem ut ante dictum, nec pretium ipsum hendrerit. Fusce sit amet sem ut metus sodales rhoncus in sed dolor. Phasellus ultrices eleifend velit ut luctus. Nulla vel diam quis sapien viverra hendrerit non eget lorem. Aenean imperdiet varius lacus sed dictum. Sed lacus purus, commodo ac magna a, vestibulum cursus neque. Proin tempus, purus eu sodales posuere, urna ipsum scelerisque enim, eu tincidunt lacus neque eu nulla. Donec at enim ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue nec leo hendrerit convallis. Praesent diam felis, convallis sed libero eget, sollicitudin suscipit mauris. Sed in bibendum velit. Nulla facilisi.
Cras in blandit nunc, eget lacinia elit. Pellentesque non mi non dolor euismod dignissim. Suspendisse et tincidunt libero, at vulputate sem. Nullam convallis viverra dapibus. Phasellus dictum ullamcorper quam at accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum in mi eget ligula porttitor venenatis. Nullam sed enim a tellus bibendum varius. Nullam ullamcorper finibus tortor at lobortis. Cras quis dolor justo. Aliquam luctus faucibus ante, ornare aliquet libero maximus sed.
</p>