-
Notifications
You must be signed in to change notification settings - Fork 3
/
demo.html
128 lines (123 loc) · 18.3 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<title>$.mousewheelStopPropagation();</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=800, maximum-scale=1.2" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>
<style type="text/css">
#container {
width: 80%;
margin: 0em auto;
padding: 0.1em 1em;
color: #000;
}
#container .content p {
color: #999;
}
#div-normal {
position: absolute;
left: 25%;
top: 25%;
margin-left: -150px;
width: 300px;
height: 400px;
padding: 0em 1em;
background: #9f9;
background: rgba(100, 255, 100, 0.7);
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#div-stop {
position: absolute;
right: 25%;
top: 25%;
margin-right: -150px;
width: 300px;
height: 400px;
padding: 0em 1em;
background: #f99;
background: rgba(255, 100, 100, 0.7);
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>
<!--[if lt IE 9]>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--<![endif]-->
<script src="mousewheelStopPropagation.js"></script>
<script>
$(function(){
$('#div-stop').mousewheelStopPropagation();
});
</script>
</head>
<body>
<div id="container">
<a href="https://github.com/basselin"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_gray_6d6d6d.png" alt="Fork me on GitHub" /></a>
<div id="div-normal">
<h2>Classic scrolling</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Fugiat do laborum veniam dolore quis quis laboris irure excepteur dolor. Laborum consectetur consequat magna sint consequat et nostrud ad nisi ad tempor et velit et. Esse labore aute laboris sunt aliquip esse veniam consectetur excepteur ipsum. Consectetur cupidatat ut ex magna irure. Fugiat labore laborum ea incididunt tempor nisi occaecat ea do proident. Ipsum officia ad laboris eu ex consectetur commodo labore incididunt sunt. Officia pariatur amet consectetur proident deserunt velit mollit ad. Laborum aliquip fugiat adipisicing cupidatat deserunt duis ipsum et consequat non consectetur. Incididunt ad nisi consectetur incididunt dolor reprehenderit exercitation incididunt cupidatat. Ad eiusmod adipisicing reprehenderit consequat ex cillum ullamco. Et aute magna proident qui ea pariatur. Officia tempor cupidatat amet dolor sit. Tempor mollit dolore cillum fugiat. Esse cupidatat exercitation aliqua sint incididunt do laborum minim in nostrud cupidatat pariatur. Commodo duis commodo non duis ipsum excepteur enim culpa ea exercitation anim et est occaecat. Ea cillum consequat esse Lorem ullamco velit occaecat nostrud fugiat incididunt mollit. Et magna in incididunt irure culpa id laboris non. Ullamco dolore nostrud nostrud laboris fugiat dolor sunt dolor duis proident dolor exercitation ea eu. Mollit tempor nostrud ullamco duis pariatur. Pariatur velit id commodo est officia in nisi sint eiusmod dolore mollit. Aute eu sunt nisi in. Dolor enim ut ut elit consequat veniam deserunt exercitation labore. Cillum veniam esse enim occaecat veniam laborum officia voluptate. Esse est consectetur ex labore ea officia do. Nostrud sit eu sit ea Lorem cillum dolore veniam duis elit nulla. Est qui dolore do consequat nisi pariatur laborum. Nulla laboris elit magna est anim nulla. Eu ea id nisi magna nulla pariatur consectetur ad proident laboris anim pariatur pariatur nostrud. Est voluptate qui non commodo anim et incididunt occaecat officia cillum consequat aliquip proident. Ut nulla enim eu fugiat labore non ex nostrud irure nulla aliquip ullamco.
</p>
</div>
<div id="div-stop">
<h2>Prevent scrolling of parent element</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Fugiat do laborum veniam dolore quis quis laboris irure excepteur dolor. Laborum consectetur consequat magna sint consequat et nostrud ad nisi ad tempor et velit et. Esse labore aute laboris sunt aliquip esse veniam consectetur excepteur ipsum. Consectetur cupidatat ut ex magna irure. Fugiat labore laborum ea incididunt tempor nisi occaecat ea do proident. Ipsum officia ad laboris eu ex consectetur commodo labore incididunt sunt. Officia pariatur amet consectetur proident deserunt velit mollit ad. Laborum aliquip fugiat adipisicing cupidatat deserunt duis ipsum et consequat non consectetur. Incididunt ad nisi consectetur incididunt dolor reprehenderit exercitation incididunt cupidatat. Ad eiusmod adipisicing reprehenderit consequat ex cillum ullamco. Et aute magna proident qui ea pariatur. Officia tempor cupidatat amet dolor sit. Tempor mollit dolore cillum fugiat. Esse cupidatat exercitation aliqua sint incididunt do laborum minim in nostrud cupidatat pariatur. Commodo duis commodo non duis ipsum excepteur enim culpa ea exercitation anim et est occaecat. Ea cillum consequat esse Lorem ullamco velit occaecat nostrud fugiat incididunt mollit. Et magna in incididunt irure culpa id laboris non. Ullamco dolore nostrud nostrud laboris fugiat dolor sunt dolor duis proident dolor exercitation ea eu. Mollit tempor nostrud ullamco duis pariatur. Pariatur velit id commodo est officia in nisi sint eiusmod dolore mollit. Aute eu sunt nisi in. Dolor enim ut ut elit consequat veniam deserunt exercitation labore. Cillum veniam esse enim occaecat veniam laborum officia voluptate. Esse est consectetur ex labore ea officia do. Nostrud sit eu sit ea Lorem cillum dolore veniam duis elit nulla. Est qui dolore do consequat nisi pariatur laborum. Nulla laboris elit magna est anim nulla. Eu ea id nisi magna nulla pariatur consectetur ad proident laboris anim pariatur pariatur nostrud. Est voluptate qui non commodo anim et incididunt occaecat officia cillum consequat aliquip proident. Ut nulla enim eu fugiat labore non ex nostrud irure nulla aliquip ullamco.
</p>
</div>
<div class="content">
<h1>$.mousewheelStopPropagation()</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</p>
<p>
Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus, scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero.
</p>
<p>
Proin nonummy, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare. Praesent odio ligula, dapibus sed, tincidunt eget, dictum ac, nibh. Nam quis lacus. Nunc eleifend molestie velit. Morbi lobortis quam eu velit. Donec euismod vestibulum massa. Donec non lectus. Aliquam commodo lacus sit amet nulla. Cras dignissim elit et augue. Nullam non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Aenean vestibulum. Sed lobortis elit quis lectus. Nunc sed lacus at augue bibendum dapibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</p>
<p>
Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus, scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero.
</p>
<p>
Proin nonummy, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare. Praesent odio ligula, dapibus sed, tincidunt eget, dictum ac, nibh. Nam quis lacus. Nunc eleifend molestie velit. Morbi lobortis quam eu velit. Donec euismod vestibulum massa. Donec non lectus. Aliquam commodo lacus sit amet nulla. Cras dignissim elit et augue. Nullam non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Aenean vestibulum. Sed lobortis elit quis lectus. Nunc sed lacus at augue bibendum dapibus.
</p>
<p>
Officia dolore velit culpa commodo proident quis deserunt enim. Laborum et occaecat est sint et amet mollit commodo officia adipisicing commodo consectetur fugiat. Incididunt occaecat velit officia labore nulla et. Anim culpa aute deserunt nisi aute aliqua. Reprehenderit veniam amet enim laboris ea nulla non nostrud laborum commodo incididunt commodo. Id id ex esse cupidatat ut. Lorem cupidatat minim nostrud amet mollit laboris cupidatat enim fugiat dolor pariatur deserunt. Officia occaecat qui in minim incididunt fugiat cupidatat do magna sint cupidatat incididunt veniam. Est in veniam in eiusmod ullamco. Occaecat tempor minim magna do occaecat duis non ex. Quis tempor excepteur labore eu tempor laborum ullamco. Qui et in eiusmod eiusmod duis. Anim cillum et voluptate exercitation nostrud consectetur excepteur in. Duis minim ex veniam voluptate enim dolore cupidatat reprehenderit adipisicing reprehenderit Lorem do tempor excepteur. Elit labore culpa qui pariatur non nulla non nisi esse nisi ipsum. Tempor laboris consequat reprehenderit consectetur aute et culpa ex enim. Sunt et deserunt sint sit magna sunt duis consectetur exercitation consectetur labore cupidatat elit. Velit consectetur voluptate id enim nisi veniam dolor velit labore culpa. Lorem reprehenderit esse incididunt quis enim excepteur sit enim nostrud. Labore quis mollit commodo ad in sunt veniam nostrud ex dolore.
</p>
<p>
Et aliquip et consequat id sunt in officia voluptate Lorem exercitation sint veniam magna incididunt. Dolore incididunt labore elit deserunt irure incididunt. Et fugiat consequat mollit eu. Proident ad ea irure excepteur mollit exercitation anim eiusmod dolore nulla. Nisi nisi cupidatat nulla incididunt ad anim id do esse ullamco qui sit aliqua. Sunt in sint deserunt qui proident occaecat adipisicing. Amet eu est consequat est sit magna cillum deserunt ea. Dolore excepteur velit fugiat est adipisicing Lorem laborum adipisicing. Irure do cupidatat proident tempor labore incididunt cillum. Dolor est ex nostrud officia quis veniam sint amet minim. Anim qui incididunt ullamco nulla commodo est. Occaecat nostrud incididunt aute excepteur officia ullamco. Aute id dolor dolore pariatur proident ad qui ut. Fugiat in minim qui deserunt. Cupidatat eiusmod reprehenderit consequat et nisi Lorem commodo. Cillum cupidatat aliqua labore proident culpa est magna aliquip ipsum aliqua. Eu voluptate Lorem do occaecat nisi consequat duis Lorem duis et. Laboris sit veniam do ex do consequat aliqua do ipsum labore reprehenderit pariatur cupidatat incididunt. Do duis nostrud incididunt non aliquip. In aliquip sint non duis ad tempor proident mollit magna. Qui tempor magna irure exercitation tempor dolor ex. Ullamco sint dolor ut reprehenderit aliquip exercitation nisi ipsum pariatur est quis. Cillum sunt tempor quis aute sit Lorem do enim et nulla proident reprehenderit quis consectetur. Occaecat culpa sunt voluptate sunt ad. Reprehenderit id proident commodo elit. Veniam duis commodo aute excepteur cupidatat velit cillum duis consectetur eu. Ea duis culpa in qui elit ut deserunt qui do. Labore exercitation ex Lorem minim non sint. Occaecat eiusmod commodo dolor mollit. Excepteur reprehenderit eiusmod pariatur aute mollit deserunt.
</p>
<p>
Qui fugiat do aute magna eiusmod fugiat officia ex. Sunt nisi ad consequat labore dolore sint labore excepteur id. Excepteur aute minim nulla proident do culpa Lorem cupidatat tempor aute aliquip dolore. Sunt aliqua dolore proident eu dolor Lorem enim id excepteur velit ipsum exercitation. Elit do deserunt mollit velit pariatur aliqua minim. Exercitation nostrud consectetur pariatur consectetur elit mollit excepteur ut anim do duis ex eu. Voluptate incididunt ipsum eu et non officia esse laborum exercitation officia eiusmod. Incididunt sit ullamco quis pariatur. Minim officia ex ut ex in ullamco ex. Culpa mollit est eiusmod officia anim voluptate ex non et quis ex reprehenderit. Duis ex excepteur dolor aute aliquip adipisicing adipisicing est esse pariatur et sint. Officia qui veniam excepteur cupidatat pariatur nisi cillum consequat in. Laboris magna proident elit minim aute laboris eu culpa sint. Minim labore irure deserunt ea pariatur cupidatat deserunt officia pariatur mollit elit elit excepteur commodo. Excepteur laboris proident incididunt elit ea commodo fugiat culpa laborum ut sint. Qui consectetur ut eiusmod adipisicing enim elit. Ad quis nostrud officia magna est qui proident nostrud ipsum aliqua. Aliquip fugiat nostrud minim cupidatat tempor quis ullamco deserunt deserunt voluptate. Pariatur fugiat incididunt dolore id elit voluptate est. Qui non minim est proident ea proident voluptate. Mollit consequat proident et labore dolor minim anim enim anim ut cillum quis. Occaecat officia do sit velit esse incididunt in. Incididunt commodo sit sit ullamco. Lorem irure exercitation id deserunt tempor commodo. Cillum mollit magna ex laborum. Dolore dolore cupidatat laborum magna nostrud est tempor aliquip reprehenderit. Labore tempor dolore enim aute eiusmod nostrud. Est sit aliqua enim adipisicing veniam reprehenderit. Consequat aliquip mollit ut cupidatat. Incididunt deserunt ad ex ad reprehenderit id et do id reprehenderit tempor excepteur laborum.
</p>
</div>
</div>
</body>
</html>