阻止scroll冒泡

 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>