Skip to content

Commit dc74b14

Browse files
ikreymerikreymer
committed
iframe scrolling: use webkit scrollbars for better scrolling iframes due to osx chrome iframe bug
scrollbar now fully functional, though some artifacts still appear #93
1 parent bd2b518 commit dc74b14

File tree

2 files changed

+85
-1
lines changed

2 files changed

+85
-1
lines changed

‎pywb/static/scroll-webkit.css

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
::-webkit-scrollbar {
2+
height: 12px;
3+
overflow: visible;
4+
width: 12px
5+
}
6+
::-webkit-scrollbar-button {
7+
height: 0;
8+
width: 0
9+
}
10+
::-webkit-scrollbar-track {
11+
background-clip: padding-box;
12+
border: solid transparent;
13+
border-width: 0 0 0 0px
14+
}
15+
::-webkit-scrollbar-track:horizontal {
16+
border-width: 4px 0 0
17+
}
18+
::-webkit-scrollbar-track:hover {
19+
background-color: rgba(0, 0, 0, .05);
20+
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
21+
}
22+
::-webkit-scrollbar-track:horizontal:hover {
23+
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
24+
}
25+
::-webkit-scrollbar-track:active {
26+
background-color: rgba(0, 0, 0, .05);
27+
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
28+
}
29+
::-webkit-scrollbar-track:horizontal:active {
30+
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
31+
}
32+
::-webkit-scrollbar-thumb {
33+
background-color: rgba(0, 0, 0, .2);
34+
background-clip: padding-box;
35+
border: solid transparent;
36+
border-width: 1px 1px 1px 2px;
37+
min-height: 28px;
38+
padding: 100px 0 0;
39+
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
40+
}
41+
::-webkit-scrollbar-thumb:horizontal {
42+
border-width: 6px 1px 1px;
43+
padding: 0 0 0 100px;
44+
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
45+
}
46+
::-webkit-scrollbar-thumb:hover {
47+
background-color: rgba(0, 0, 0, .4);
48+
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
49+
}
50+
::-webkit-scrollbar-thumb:active {
51+
background-color: rgba(0, 0, 0, 0.5);
52+
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
53+
}
54+
::-webkit-scrollbar-corner {
55+
background: transparent
56+
}
57+
58+
/*
59+
body::-webkit-scrollbar-track-piece {
60+
background-clip: padding-box;
61+
background-color: #f5f5f5;
62+
border: solid #fff;
63+
border-width: 0 0 0 3px;
64+
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
65+
}
66+
body::-webkit-scrollbar-track-piece:horizontal {
67+
border-width: 3px 0 0;
68+
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
69+
}
70+
body::-webkit-scrollbar-thumb {
71+
border-width: 1px 1px 1px 5px
72+
}
73+
body::-webkit-scrollbar-thumb:horizontal {
74+
border-width: 5px 1px 1px
75+
}
76+
body::-webkit-scrollbar-corner {
77+
background-clip: padding-box;
78+
background-color: #f5f5f5;
79+
border: solid #fff;
80+
border-width: 3px 0 0 3px;
81+
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
82+
}
83+
*/

‎pywb/templates/frame_insert.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,15 @@
2323
</script>
2424
<script src='{{ wbrequest.host_prefix }}/{{ static_path }}/wb.js'> </script>
2525
<link rel='stylesheet' href='{{ wbrequest.host_prefix }}/{{ static_path }}/wb.css'/>
26+
<link rel='stylesheet' href='{{ wbrequest.host_prefix }}/{{ static_path }}/scroll-webkit.css'/>
2627

2728
{% include banner_html ignore missing %}
2829

2930
<script src='{{ wbrequest.host_prefix }}/{{ static_path }}/wb_frame.js'> </script>
3031
</head>
3132
<body style="margin: 0px; padding: 0px;">
3233
<div class="wb_iframe_div">
33-
<iframe id="replay_iframe" src="{{ wbrequest.wb_prefix + embed_url }}" onload="iframe_loaded(event);" seamless="seamless" frameborder="0" scrolling="yes" class="wb_iframe"></iframe>
34+
<iframe id="replay_iframe" src="{{ wbrequest.wb_prefix + embed_url }}" onload="iframe_loaded(event);" frameborder="0" seamless="seamless" scrolling="yes" class="wb_iframe"></iframe>
3435
</div>
3536
</body>
3637
</html>

0 commit comments

Comments
 (0)