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 >
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>