<div dir="ltr">Neat! &nbsp;Over in Blink-land, we&#39;re also quite interested in infinite scrolling. &nbsp;Do you have a doc that describes the approach you&#39;re investigating?<div><br></div><div>We&#39;ve been experimenting with how you might be able to achieve infinite scrolling using existing web platform API. &nbsp;You can see the engine we&#39;re experimenting with at the URL below:<br>

</div><div><div><br></div><div><a href="http://src.chromium.org/viewvc/chrome/trunk/src/tools/perf/page_sets/key_silk_cases/infinite_scrolling.html">http://src.chromium.org/viewvc/chrome/trunk/src/tools/perf/page_sets/key_silk_cases/infinite_scrolling.html</a><br>

<div class="gmail_extra"><br></div><div class="gmail_extra">You can mix-and-match that infinite scrolling engine with &lt;template&gt; and web components to get markup that looks roughly as follows:</div><div class="gmail_extra">

<br></div><div class="gmail_extra"><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &lt;app-list id=&quot;messages&quot;&gt;</div><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;app-dismissable-list class=&quot;padding-wrapper&quot;&gt;</div><div class="gmail_extra">

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;template repeat&gt;</div><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;app-dismissable-item class=&quot;item conversation&quot;&gt;</div><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;avatar&quot; style=&quot;background-color: {{ avatarColor }}&quot;&gt;{{ avatarLetter }}&lt;/div&gt;</div>

<div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;summary&quot;&gt;</div><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;topline&quot;&gt;</div><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;participants&quot;&gt;{{ participants }}&lt;/div&gt;</div>

<div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;time&quot;&gt;{{ time }}&lt;/div&gt;</div><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;</div><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;bottomline&quot;&gt;</div>

<div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;preview&quot;&gt;&lt;span class=&quot;subject&quot;&gt;{{ subject }}&lt;/span&gt; &amp;mdash;</div><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;snippet&quot;&gt;{{ snippet }}&lt;/span&gt;&lt;/div&gt;</div>

<div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;trinkets&quot;&gt;&amp;#x2606;&lt;/div&gt;</div><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;</div><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;</div>

<div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/app-dismissable-item&gt;</div><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/template&gt;</div><div class="gmail_extra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/app-dismissable-list&gt;</div><div class="gmail_extra">

&nbsp; &nbsp; &nbsp; &nbsp; &lt;/app-list&gt;</div><div><br></div><div>The app-list custom element stamps out a number of physical list items when the page loads and then changes the values in the template as you scroll to different positions in the list. &nbsp;You can see a worked example on GitHub:&nbsp;</div>

</div><div class="gmail_extra"><br></div><div class="gmail_extra"><a href="https://github.com/abarth/app-widgets/blob/master/demo.html">https://github.com/abarth/app-widgets/blob/master/demo.html</a><br></div><div class="gmail_extra">

<br></div><div class="gmail_extra">We&#39;ve been experimenting with these widgets in Blink, which means they might not work in Safari yet.</div><div class="gmail_extra"><br></div><div class="gmail_extra">Adam</div><div class="gmail_extra">

<br><br><div class="gmail_quote">On Tue, Jan 28, 2014 at 3:07 PM, Beth Dakin <span dir="ltr">&lt;<a href="mailto:bdakin@apple.com" target="_blank">bdakin@apple.com</a>&gt;</span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">

Hi all,<br>
<br>
We&#39;re experimenting with engine features that could help people build infinite scrolling websites. To start, we&#39;re prototyping an event for triggering the loading of new content when the user has scrolled near a content edge.<br>


<br>
We&#39;ll be kicking off an open-ended discussion in the CSS WG about these events as well as other possible features for infinite scrolling. As a part of that discussion, we&#39;d like to be able to have WG members grab a WebKit build to play with the prototype event and get a feel for how it works and if it&#39;s the sort of thing the platform should have.<br>


<br>
I&#39;ve got a patch that adds these events behind a flag and enables them on the Mac port (so people can grab a nightly and try them out). I&rsquo;d like to land this patch this week so we can have a demoable prototype to talk about in the CSS WG. If you&rsquo;re curious about the approach, check out the patch here: <a href="https://bugs.webkit.org/show_bug.cgi?id=127371" target="_blank">https://bugs.webkit.org/show_bug.cgi?id=127371</a><br>


<br>
If there are no objections, I&#39;ll land the patch on Thursday.<br>
<br>
Thanks,<br>
Beth<br>
<br>
_______________________________________________<br>
webkit-dev mailing list<br>
<a href="mailto:webkit-dev@lists.webkit.org">webkit-dev@lists.webkit.org</a><br>
<a href="https://lists.webkit.org/mailman/listinfo/webkit-dev" target="_blank">https://lists.webkit.org/mailman/listinfo/webkit-dev</a><br>
</blockquote></div><br></div></div></div></div>