Skip to content

Instantly share code, notes, and snippets.

@tatey

tatey/gist:154781

Created July 25, 2009 11:48
Show Gist options
  • Save tatey/154781 to your computer and use it in GitHub Desktop.
Save tatey/154781 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript Scroll
Raw
gistfile1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JavaScript Scroll</title>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
ul
{
width: 100px;
height: 450px;
border: 1px solid #000;
list-style-type: none;
overflow: hidden;
}
ul li
{
height: 40px;
padding: 0;
margin: 0 0 10px 0;
background: #f00;
}
</style>
</head>
<body>
<h1>JavaScript Scroll</h1>
<p>GitHub inspired scroller. No duplicate elements. Large lists.</p>
<ul id="list">
<li>Event 0</li>
<li>Event 1</li>
<li>Event 2</li>
<li>Event 3</li>
<li>Event 4</li>
<li>Event 5</li>
<li>Event 6</li>
<li>Event 7</li>
<li>Event 8</li>
<li>Event 9</li>
<li>Event 10</li>
<li>Event 11</li>
<li>Event 12</li>
<li>Event 13</li>
<li>Event 14</li>
<li>Event 15</li>
<li>Event 16</li>
<li>Event 17</li>
<li>Event 18</li>
<li>Event 19</li>
<li>Event 20</li>
<li>Event 21</li>
<li>Event 22</li>
<li>Event 23</li>
<li>Event 24</li>
<li>Event 25</li>
<li>Event 26</li>
<li>Event 27</li>
<li>Event 28</li>
<li>Event 29</li>
<li>Event 30</li>
<li>Event 31</li>
<li>Event 32</li>
<li>Event 33</li>
<li>Event 34</li>
<li>Event 35</li>
<li>Event 36</li>
<li>Event 37</li>
<li>Event 38</li>
<li>Event 39</li>
<li>Event 40</li>
<li>Event 41</li>
<li>Event 42</li>
<li>Event 43</li>
<li>Event 44</li>
<li>Event 45</li>
<li>Event 46</li>
<li>Event 47</li>
<li>Event 48</li>
<li>Event 49</li>
<li>Event 50</li>
<li>Event 51</li>
<li>Event 52</li>
<li>Event 53</li>
<li>Event 54</li>
<li>Event 55</li>
<li>Event 56</li>
<li>Event 57</li>
<li>Event 58</li>
<li>Event 59</li>
<li>Event 60</li>
<li>Event 61</li>
<li>Event 62</li>
<li>Event 63</li>
<li>Event 64</li>
<li>Event 65</li>
<li>Event 66</li>
<li>Event 67</li>
<li>Event 68</li>
<li>Event 69</li>
<li>Event 70</li>
<li>Event 71</li>
<li>Event 72</li>
<li>Event 73</li>
<li>Event 74</li>
<li>Event 75</li>
<li>Event 76</li>
<li>Event 77</li>
<li>Event 78</li>
<li>Event 79</li>
<li>Event 80</li>
<li>Event 81</li>
<li>Event 82</li>
<li>Event 83</li>
<li>Event 84</li>
<li>Event 85</li>
<li>Event 86</li>
<li>Event 87</li>
<li>Event 88</li>
<li>Event 89</li>
<li>Event 90</li>
<li>Event 91</li>
<li>Event 92</li>
<li>Event 93</li>
<li>Event 94</li>
<li>Event 95</li>
<li>Event 96</li>
<li>Event 97</li>
<li>Event 98</li>
<li>Event 99</li>
<li>Event 100</li>
<li>Event 101</li>
<li>Event 102</li>
<li>Event 103</li>
<li>Event 104</li>
<li>Event 105</li>
<li>Event 106</li>
<li>Event 107</li>
<li>Event 108</li>
<li>Event 109</li>
<li>Event 110</li>
<li>Event 111</li>
<li>Event 112</li>
<li>Event 113</li>
<li>Event 114</li>
<li>Event 115</li>
<li>Event 116</li>
<li>Event 117</li>
<li>Event 118</li>
<li>Event 119</li>
<li>Event 120</li>
<li>Event 121</li>
<li>Event 122</li>
<li>Event 123</li>
<li>Event 124</li>
<li>Event 125</li>
<li>Event 126</li>
<li>Event 127</li>
<li>Event 128</li>
<li>Event 129</li>
<li>Event 130</li>
<li>Event 131</li>
<li>Event 132</li>
<li>Event 133</li>
<li>Event 134</li>
<li>Event 135</li>
<li>Event 136</li>
<li>Event 137</li>
<li>Event 138</li>
<li>Event 139</li>
<li>Event 140</li>
<li>Event 141</li>
<li>Event 142</li>
<li>Event 143</li>
<li>Event 144</li>
<li>Event 145</li>
<li>Event 146</li>
<li>Event 147</li>
<li>Event 148</li>
<li>Event 149</li>
<li>Event 150</li>
<li>Event 151</li>
<li>Event 152</li>
<li>Event 153</li>
<li>Event 154</li>
<li>Event 155</li>
<li>Event 156</li>
<li>Event 157</li>
<li>Event 158</li>
<li>Event 159</li>
<li>Event 160</li>
<li>Event 161</li>
<li>Event 162</li>
<li>Event 163</li>
<li>Event 164</li>
<li>Event 165</li>
<li>Event 166</li>
<li>Event 167</li>
<li>Event 168</li>
<li>Event 169</li>
<li>Event 170</li>
<li>Event 171</li>
<li>Event 172</li>
<li>Event 173</li>
<li>Event 174</li>
<li>Event 175</li>
<li>Event 176</li>
<li>Event 177</li>
<li>Event 178</li>
<li>Event 179</li>
<li>Event 180</li>
<li>Event 181</li>
<li>Event 182</li>
<li>Event 183</li>
<li>Event 184</li>
<li>Event 185</li>
<li>Event 186</li>
<li>Event 187</li>
<li>Event 188</li>
<li>Event 189</li>
<li>Event 190</li>
<li>Event 191</li>
<li>Event 192</li>
<li>Event 193</li>
<li>Event 194</li>
<li>Event 195</li>
<li>Event 196</li>
<li>Event 197</li>
<li>Event 198</li>
<li>Event 199</li>
<li>Event 200</li>
<li>Event 201</li>
<li>Event 202</li>
<li>Event 203</li>
<li>Event 204</li>
<li>Event 205</li>
<li>Event 206</li>
<li>Event 207</li>
<li>Event 208</li>
<li>Event 209</li>
<li>Event 210</li>
<li>Event 211</li>
<li>Event 212</li>
<li>Event 213</li>
<li>Event 214</li>
<li>Event 215</li>
<li>Event 216</li>
<li>Event 217</li>
<li>Event 218</li>
<li>Event 219</li>
<li>Event 220</li>
<li>Event 221</li>
<li>Event 222</li>
<li>Event 223</li>
<li>Event 224</li>
<li>Event 225</li>
<li>Event 226</li>
<li>Event 227</li>
<li>Event 228</li>
<li>Event 229</li>
<li>Event 230</li>
<li>Event 231</li>
<li>Event 232</li>
<li>Event 233</li>
<li>Event 234</li>
<li>Event 235</li>
<li>Event 236</li>
<li>Event 237</li>
<li>Event 238</li>
<li>Event 239</li>
<li>Event 240</li>
<li>Event 241</li>
<li>Event 242</li>
<li>Event 243</li>
<li>Event 244</li>
<li>Event 245</li>
<li>Event 246</li>
<li>Event 247</li>
<li>Event 248</li>
<li>Event 249</li>
<li>Event 250</li>
<li>Event 251</li>
<li>Event 252</li>
<li>Event 253</li>
<li>Event 254</li>
<li>Event 255</li>
<li>Event 256</li>
<li>Event 257</li>
<li>Event 258</li>
<li>Event 259</li>
<li>Event 260</li>
<li>Event 261</li>
<li>Event 262</li>
<li>Event 263</li>
<li>Event 264</li>
<li>Event 265</li>
<li>Event 266</li>
<li>Event 267</li>
<li>Event 268</li>
<li>Event 269</li>
<li>Event 270</li>
<li>Event 271</li>
<li>Event 272</li>
<li>Event 273</li>
<li>Event 274</li>
<li>Event 275</li>
<li>Event 276</li>
<li>Event 277</li>
<li>Event 278</li>
<li>Event 279</li>
<li>Event 280</li>
<li>Event 281</li>
<li>Event 282</li>
<li>Event 283</li>
<li>Event 284</li>
<li>Event 285</li>
<li>Event 286</li>
<li>Event 287</li>
<li>Event 288</li>
<li>Event 289</li>
<li>Event 290</li>
<li>Event 291</li>
<li>Event 292</li>
<li>Event 293</li>
<li>Event 294</li>
<li>Event 295</li>
<li>Event 296</li>
<li>Event 297</li>
<li>Event 298</li>
<li>Event 299</li>
<li>Event 300</li>
</ul>
<script type="text/javascript">
var elements;
function scrollList()
{
var visibleElements = $('list').select('li');
var height = visibleElements.first().getHeight() +
parseFloat(visibleElements.first().getStyle('margin-bottom'));
new Effect.Parallel(
visibleElements.map(function(element) {
return new Effect.Move(element, { sync: true, y: '-' + height });
}),
{
delay: 1.0,
afterFinish: function()
{
visibleElements.each(function(element) {
element.setStyle({ top: '0px' });
});
elements.push(Element.remove(visibleElements.first()));
$('list').insert(elements.first()) && elements.splice(0, 1);
scrollList();
}
}
);
}
Event.observe(window, 'load', function() {
elements = $('list').select('li').splice(10);
elements.each(function(element) {
Element.remove(element);
});
scrollList();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment