使用jQuery使鼠标滚动子div，即使它位于父div内

Question

I have a parent div and a child scrollable div.

May I know how can I make it (using jQuery) that when the mouse enter the parent div, the scroll-wheel will scroll the child div instead of the body page?

I only know that I can use mouseover for the parent div, but then I don't know what I should write in order to make the scroll-wheel act as it is inside the child 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> 

Answer 1

You can listen for the wheel event on the .parent-div then scroll the .child-div accordingly.

This lets you point at the parent-div (the blue box) while not pointing at the child-div (the scrollable part inside the blue box) and use the wheel.

 $(".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>