[webkit-dev] Infinite scrolling feature exploration

[Adam Barth]

Neat!  Over in Blink-land, we're also quite interested in infinite
scrolling.  Do you have a doc that describes the approach you're
investigating?

We've been experimenting with how you might be able to achieve infinite
scrolling using existing web platform API.  You can see the engine we're
experimenting with at the URL below:

http://src.chromium.org/viewvc/chrome/trunk/src/tools/perf/page_sets/key_silk_cases/infinite_scrolling.html

You can mix-and-match that infinite scrolling engine with <template> and
web components to get markup that looks roughly as follows:

        <app-list id="messages">
          <app-dismissable-list class="padding-wrapper">
            <template repeat>
              <app-dismissable-item class="item conversation">
                <div class="avatar" style="background-color: {{ avatarColor
}}">{{ avatarLetter }}</div>
                <div class="summary">
                  <div class="topline">
                    <div class="participants">{{ participants }}</div>
                    <div class="time">{{ time }}</div>
                  </div>
                  <div class="bottomline">
                    <div class="preview"><span class="subject">{{ subject
}}</span> &mdash;
                      <span class="snippet">{{ snippet }}</span></div>
                    <div class="trinkets">&#x2606;</div>
                  </div>
                </div>
              </app-dismissable-item>
            </template>
          </app-dismissable-list>
        </app-list>

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.  You can see a worked example on GitHub:

https://github.com/abarth/app-widgets/blob/master/demo.html

We've been experimenting with these widgets in Blink, which means they
might not work in Safari yet.

Adam


On Tue, Jan 28, 2014 at 3:07 PM, Beth Dakin <bdakin at apple.com> wrote:

> Hi all,
>
> We're experimenting with engine features that could help people build
> infinite scrolling websites. To start, we're prototyping an event for
> triggering the loading of new content when the user has scrolled near a
> content edge.
>
> We'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'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's the sort of thing the platform should have.
>
> I'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'd like to
> land this patch this week so we can have a demoable prototype to talk about
> in the CSS WG. If you're curious about the approach, check out the patch
> here: https://bugs.webkit.org/show_bug.cgi?id=127371
>
> If there are no objections, I'll land the patch on Thursday.
>
> Thanks,
> Beth
>
> _______________________________________________
> webkit-dev mailing list
> webkit-dev at lists.webkit.org
> https://lists.webkit.org/mailman/listinfo/webkit-dev
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-dev/attachments/20140128/8d1087e1/attachment.html>