Skip to content

Commit e4a349a

Browse files
author
Ola Holmström
committed
v0.0.1
0 parents  commit e4a349a

File tree

6 files changed

+218
-0
lines changed

6 files changed

+218
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.swp

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License
2+
3+
Copyright (c) 2014 Ola Holmström <olaholmstrom+github@gmail.com>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of
6+
this software and associated documentation files (the "Software"), to deal in
7+
the Software without restriction, including without limitation the rights to
8+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
9+
of the Software, and to permit persons to whom the Software is furnished to do
10+
so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# scrollparent.js
2+
3+
A function to get the scrolling parent of an html element.
4+
5+
[![browser support](https://ci.testling.com/olahol/scrollparent.js.png)
6+
](https://ci.testling.com/olahol/scrollparent.js)
7+
8+
## Example
9+
10+
```js
11+
Scrollparent(document.getElementById("content")) // window
12+
```
13+
14+
```js
15+
Scrollparent(document.getElementById("inside-a-scrolling-div")) // HTMLDivElement
16+
```
17+
18+
## License
19+
20+
MIT

‎package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "scrollparent.js"
3+
, "private": true
4+
, "version": "0.0.1"
5+
, "main": "./scrollparent.js"
6+
, "testling": {
7+
"html": "test.html"
8+
, "browsers": [
9+
"ie/9..latest",
10+
"chrome/22..latest",
11+
"firefox/16..latest",
12+
"safari/latest",
13+
"opera/11.0..latest",
14+
"iphone/6",
15+
"ipad/6"
16+
]
17+
}, "scripts": {
18+
"test": "testling . -x 'firefox-trunk'"
19+
}
20+
}

‎scrollparent.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
;(function () {
2+
var parents = function (node, ps) {
3+
if (node.parentNode === null) { return ps; }
4+
5+
return parents(node.parentNode, ps.concat([node]));
6+
};
7+
8+
var style = function (node, prop) {
9+
return getComputedStyle(node, null).getPropertyValue(prop);
10+
};
11+
12+
var overflow = function (node) {
13+
return style(node, "overflow") + style(node, "overflow-y") + style(node, "overflow-x");
14+
};
15+
16+
var scroll = function (node) {
17+
return (/(auto|scroll)/).test(overflow(node));
18+
};
19+
20+
var scrollParent = function (node) {
21+
if (!(node instanceof HTMLElement)) {
22+
return ;
23+
}
24+
25+
var ps = parents(node.parentNode, []);
26+
27+
for (var i = 0; i < ps.length; i += 1) {
28+
if (scroll(ps[i])) {
29+
return ps[i];
30+
}
31+
}
32+
33+
return window;
34+
};
35+
36+
// If common js is defined use it.
37+
if (typeof module === "object" && module !== null) {
38+
module.exports = scrollParent;
39+
} else {
40+
window.Scrollparent = scrollParent;
41+
}
42+
})();

‎test.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title></title>
6+
<meta charset="utf-8">
7+
<style>
8+
.scroll {
9+
overflow: scroll;
10+
height: 100px;
11+
width: 200px;
12+
}
13+
14+
.scroll-hidden {
15+
overflow: hidden;
16+
height: 100px;
17+
width: 200px;
18+
}
19+
20+
.scroll-y {
21+
overflow-y: scroll;
22+
height: 100px;
23+
width: 200px;
24+
}
25+
</style>
26+
</head>
27+
28+
29+
<body>
30+
31+
<div class="scroll">
32+
<div id="test1">
33+
Contrary to popular belief, Lorem Ipsum is not simply random text. It has
34+
roots in a piece of classical Latin literature from 45 BC, making it over
35+
2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
36+
College in Virginia, looked up one of the more obscure Latin words,
37+
consectetur, from a Lorem Ipsum passage, and going through the cites of
38+
the word in classical literature, discovered the undoubtable source. Lorem
39+
Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
40+
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45
41+
BC. This book is a treatise on the theory of ethics, very popular during
42+
the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
43+
amet..", comes from a line in section 1.10.32.
44+
</div>
45+
</div>
46+
47+
<div>
48+
<div id="test2">
49+
Contrary to popular belief, Lorem Ipsum is not simply random text. It has
50+
roots in a piece of classical Latin literature from 45 BC, making it over
51+
2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
52+
College in Virginia, looked up one of the more obscure Latin words,
53+
consectetur, from a Lorem Ipsum passage, and going through the cites of
54+
the word in classical literature, discovered the undoubtable source. Lorem
55+
Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
56+
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45
57+
BC. This book is a treatise on the theory of ethics, very popular during
58+
the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
59+
amet..", comes from a line in section 1.10.32.
60+
</div>
61+
</div>
62+
63+
<div class="scroll-hidden">
64+
<div id="test3">
65+
Contrary to popular belief, Lorem Ipsum is not simply random text. It has
66+
roots in a piece of classical Latin literature from 45 BC, making it over
67+
2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
68+
College in Virginia, looked up one of the more obscure Latin words,
69+
consectetur, from a Lorem Ipsum passage, and going through the cites of
70+
the word in classical literature, discovered the undoubtable source. Lorem
71+
Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
72+
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45
73+
BC. This book is a treatise on the theory of ethics, very popular during
74+
the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
75+
amet..", comes from a line in section 1.10.32.
76+
</div>
77+
</div>
78+
79+
<div class="scroll-y">
80+
<div id="test4">
81+
Contrary to popular belief, Lorem Ipsum is not simply random text. It has
82+
roots in a piece of classical Latin literature from 45 BC, making it over
83+
2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
84+
College in Virginia, looked up one of the more obscure Latin words,
85+
consectetur, from a Lorem Ipsum passage, and going through the cites of
86+
the word in classical literature, discovered the undoubtable source. Lorem
87+
Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
88+
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45
89+
BC. This book is a treatise on the theory of ethics, very popular during
90+
the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
91+
amet..", comes from a line in section 1.10.32.
92+
</div>
93+
</div>
94+
95+
<script src="scrollparent.js"></script>
96+
<script>
97+
var equal = function (a, b) {
98+
console.log((a === b ? "ok" : "not ok") + " " + (++ assertion));
99+
}
100+
101+
var assertion = 0;
102+
103+
console.log("TAP version 13");
104+
console.log("1..4");
105+
106+
equal(Scrollparent(document.getElementById("test1")).className, "scroll");
107+
108+
equal(Scrollparent(document.getElementById("test2")), window);
109+
equal(Scrollparent(document.getElementById("test3")), window);
110+
111+
equal(Scrollparent(document.getElementById("test4")).className, "scroll-y");
112+
</script>
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)