Fix city-list example after changes to scrolling

sky/examples/city-list/city-list.sky

 <!--
 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
 <import src="city-data-service.sky" as="CityDataService" />
 <import src="city-sequence.sky" as="CitySequence" />
 
 <sky-element name="state-header">
@@ skipping 102 matching lines @@
       overflow: hidden;
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       display: block;
       background-color: #fff;
   }
 
-  #scroller {
-    overflow-x: hidden;
-    overflow-y: auto;
-    perspective: 5px;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-
-  #scroller::-webkit-scrollbar {
-    display:none;
-  }
-
-  #scrollarea {
+  #contentarea {
     will-change: transform;
-    transform-style: preserve-3d;
-  }
-
-  #contentarea {
-    position: absolute;
-    will-change: contents;
-    width: 100%;
-  }
-
-  .void {
-    display: none;
   }
 
   .position {
     position: absolute;
     left: 0;
     right: 0;
   }
 
   </style>
-  <div id="scroller">
-    <div id="scrollarea">
-      <div id="contentarea">
-      </div>
+    <div id="contentarea">
     </div>
-  </div>
 </template>
 <script>
 
 (function(global) {
     "use strict";
 
     var LOAD_LENGTH = 20;
     var LOAD_BUFFER_PRE = LOAD_LENGTH * 4;
     var LOAD_BUFFER_POST = LOAD_LENGTH * 4;
 
@@ skipping 94 matching lines @@
         }).catch(function(ex) {
           console.log(ex.stack);
         });
       } catch (ex) {
         console.log(ex.stack);
       }
     }
 
     function Scroller() {
       this.contentarea = null;
-      this.scroller = null;
-      this.contentTop = 0; // #contentarea's current top
-      this.scrollTop = 0; // #scrollarea's current top
-      this.scrollHeight = -1; // height of #scroller (the viewport)
-      this.lastScrollTop = 0; // last known scrollTop to compute deltas
+      this.scrollTop = 0;
+      this.scrollHeight = -1;
     }
 
-    Scroller.prototype.setup = function(scroller, scrollarea, contentarea) {
+    Scroller.prototype.setup = function(scrollHeight, contentarea) {
+      this.scrollHeight = scrollHeight;
       this.contentarea = contentarea;
-      this.scroller = scroller;
-
-      this.scrollHeight = scroller.offsetHeight;
-      scrollarea.style.height = (this.scrollHeight) * 4 + 'px';
-
-      this.reset();
     }
 
-    Scroller.prototype.captureNewFrame = function(event) {
-        var scrollTop = event.target.scrollTop;
-
-        // Protect from re-entry.
-        if (this.lastScrollTop == scrollTop)
-          return false;
-
-        var scrollDown = scrollTop > this.lastScrollTop;
-        if (scrollDown) {
-          while (scrollTop > this.scrollHeight * 1.5) {
-            scrollTop -= this.scrollHeight;
-            this.contentTop -= this.scrollHeight;
-          }
-        } else {
-          while(scrollTop < this.scrollHeight * 1.5) {
-            scrollTop += this.scrollHeight;
-            this.contentTop += this.scrollHeight;
-          }
-        }
-
-        this.lastScrollTop = scrollTop;
-        event.target.scrollTop = scrollTop;
-        this.contentarea.style.top = this.contentTop + 'px';
-
-        this.scrollTop = scrollTop - this.contentTop;
-
-        return true;
+    Scroller.prototype.scrollBy = function(amount) {
+        this.scrollTop += amount;
+        this.scrollTo();
     }
 
-    Scroller.prototype.reset = function() {
-      if (!this.contentarea)
-        return;
-
-      this.scroller.scrollTop = this.scrollHeight;
-      this.lastScrollTop = this.scrollHeight;
-
-      this.contentarea.style.top = this.scrollHeight + 'px';
-      this.contentTop = this.scrollHeight;
-      this.scrollTop = 0;
+    Scroller.prototype.scrollTo = function() {
+      var transform = 'translateY(' + -this.scrollTop.toFixed(2) + 'px)';
+      this.contentarea.style.transform = transform;
     }
 
     // Current position and height of the scroller, that could
     // be used (by Tiler, for example) to reason about where to
     // place visible things.
     Scroller.prototype.getCurrentFrame = function() {
       return { top: this.scrollTop, height: this.scrollHeight };
     }
 
     Scroller.prototype.hasFrame = function() {
@@ skipping 183 matching lines @@
     Tiler.prototype.updateFirstItem = function(offset) {
       var tiles = this.tiles;
 
       if (!tiles.length) {
         this.firstItem = 0;
       } else {
         this.firstItem += offset;
       }
     }
 
-    Tiler.prototype.checkinAllTiles = function() {
-      var tiles = this.tiles;
-      while (tiles.length) {
-        this.checkinTile(tiles.pop());
-      }
-    }
-
-    Tiler.prototype.reset = function() {
-      this.checkinAllTiles();
-      this.drawTop = 0;
-      this.drawBottom = 0;
-    }
-
     module.exports.CityListElement = class extends SkyElement {
 
       created() {
         this.loader = null;
         this.scroller = null;
         this.tiler = null;
         this.date = null;
         this.month = null;
         this.views = null;
-        this.scrollerElement = null;
       }
 
       attached() {
         this.views = {};
         this.loader = new Loader(this);
         this.scroller = new Scroller();
         this.tiler = new Tiler(
             this.shadowRoot.getElementById('contentarea'), this.views, {
           stateHeader: 27,
           letterHeader: 18,
           cityItem: 30
         });
 
-        this.scrollerElement = this.shadowRoot.getElementById('scroller');
-        this.scrollerElement.addEventListener('scroll',
-            this.handleScroll.bind(this));
+        var self = this;
+        this.addEventListener('wheel', function(event) {
+          self.scrollBy(-event.offsetY)
+        });
 
-        var self = this;
         setTimeout(function() {
           self.domReady();
           self.loader.maybeLoadMoreData(self.dataLoaded.bind(self));
         });
       }
 
       domReady() {
-        this.scroller.setup(this.shadowRoot.getElementById('scroller'),
-            this.shadowRoot.getElementById('scrollarea'),
+        this.scroller.setup(this.clientHeight,
             this.shadowRoot.getElementById('contentarea'));
         var scrollFrame = this.scroller.getCurrentFrame();
         this.tiler.setupViews(scrollFrame);
       }
 
       updateView(data, scrollChanged) {
         var scrollFrame = this.scroller.getCurrentFrame();
         this.tiler.drawTiles(scrollFrame, data);
         var datum = scrollChanged ?
             this.tiler.getFirstVisibleDatum(scrollFrame) : null;
         this.loader.maybeLoadMoreData(this.dataLoaded.bind(this), datum);
       }
 
       dataLoaded(data, indexOffset) {
         var scrollFrame = this.scroller.getCurrentFrame();
         this.tiler.updateFirstItem(indexOffset);
         this.updateView(data.items, false);
       }
 
-      handleScroll(event) {
-        if (!this.scroller.captureNewFrame(event))
-          return;
-
+      scrollBy(amount) {
+        this.scroller.scrollBy(amount);
         this.updateView(this.loader.getItems(), true);
       }
-
-      scrollBy(amount) {
-        this.scrollerElement.scrollTop += amount;
-        this.handleScroll({ target: this.scrollerElement });
-      }
     }.register();
 
 })(this);
 </script>
 </sky-element>