-
Notifications
You must be signed in to change notification settings - Fork 7
/
utterscroll-example.html
55 lines (49 loc) · 2.65 KB
/
utterscroll-example.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
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src='https://rawgithub.com/debiki/utterscroll/master/jquery-scrollable.js'></script>
<script type="text/javascript">
jQuery(function($) {
// Here, could test if this is a touch device with not mouse, and, if so, don't enable.
debiki.Utterscroll.enable();
});
</script>
</head>
<body style="width:2000px; height:2000px; background-color:lightgray">
<p>This is not a test, this is for real.</p>
<div style="width:800px; height:400px; background-color: blue; position:relative; left:100px; overflow: scroll">
<div style="width:2000px; height: 600px; background-color: #eee; position: relative; left: 300px; top: 130px">
<p style="width:400px">
Utterscroll works in nested scrollbars. Click and drag :-) But not too close to this text, becauase then you'd select the text insted.<br>
<br>
Also test to use the scrollbars. However,
There might be problems with the scrollbars however, unless you style the containing
element with <kbd>position: relative</kbd> or <kbd>position: absolute</kbd>.<br>
(In this example, the wrapping blue box has <kbd>position: relative</kbd>.)
</p>
<p style="position: absolute; left: 350px; top: 200px">Do you think this <div> has any right edge? Do you think it has any bottom?</p>
<p style="position: absolute; right: 0; bottom: 0">This is the right bottom, it did exist and you have found it :-)</p>
</div>
</div>
<!-- This messes up the whole page, don't know why.
<div style="width:800px; height:400px; background-color: green; overflow: scroll">
<div style="width:1000px; height: 500px; background-color: #ddd; position: relative; left: 200px; top: 100px">
<p>
<br><br>
Here scrollbars might be broken in Firefox, because the wrapping <div> has <kbd>position: static</kbd>.<br>
As mentioned, I'm thinking it's a Firefox bug. No problems in Chrome anyway.<br>
Test to click the scrollbars, does it work?
</p>
</div>
</div>
-->
<div style="width:300px; height:400px; background-color: green"></div>
<div style="width:600px; height:100px; background-color: red; position:relative; left:350px"></div>
<div style="width:1200px; height:600px; background-color: blue; position:relative; left:700px"></div>
<div style="width:700px; height:700px; background-color: green"></div>
<div style="width:600px; height:100px; background-color: red; position:relative; left:550px"></div>
<p>This is the bottom of the page.</p>
<script src='https://rawgithub.com/debiki/utterscroll/master/debiki-utterscroll.js'></script>
</body>
</html>