1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 10 <style> 11 .main { 12 overflow: scroll; 13 400px; 14 height: 400px; 15 border: 1px solid #aaa; 16 } 17 18 .main p { 19 height: 800px; 20 } 21 </style> 22 </head> 23 24 <body> 25 <div id="main" class="main"> 26 <p>123</p> 27 </div> 28 <p style="height:1000px;">46</p> 29 </body> 30 <script> 31 $(function () { 32 var scrollTop = -1; // 鼠标进入到区域后，则存储当前window滚动条的高度 33 $('#main').hover(function () { 34 scrollTop = $(window).scrollTop(); 35 console.log('enter') 36 }, function () { 37 console.log('out') 38 scrollTop = -1; 39 }); 40 41 // 鼠标进入到区域后，则强制window滚动条的高度 42 $(window).scroll(function () { 43 scrollTop !== -1 && $(this).scrollTop(scrollTop); 44 }) 45 }) 46 </script> 47 48 </html>