[MD settings] shrink overscroll when scrolling up

chrome/browser/resources/settings/settings_main/settings_main.js

Index: chrome/browser/resources/settings/settings_main/settings_main.js
diff --git a/chrome/browser/resources/settings/settings_main/settings_main.js b/chrome/browser/resources/settings/settings_main/settings_main.js
index 62a76e1a425eae45f5ceeeba7fde9f381c50c372..30eb744895e2bfcd570189da2d7104532ef06f75 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -37,6 +37,12 @@ Polymer({
     /** @private */
     inSubpage_: Boolean,
 
+    /** @private */
+    overscroll_: {
+      type: Number,
+      observer: 'overscrollChanged_',
+    },
+
     /**
      * Controls which main pages are displayed via dom-ifs.
      * @type {!{about: boolean, basic: boolean, advanced: boolean}}
@@ -78,6 +84,30 @@ Polymer({
       settings.navigateTo(this.advancedToggleExpanded_ ?
           settings.Route.ADVANCED : settings.Route.BASIC);
     }.bind(this));
+
+  },
+
+  /** @private */
+  overscrollChanged_: function() {
+    if (!this.overscroll_ && this.boundScroll_) {
+      this.parentNode.scroller.removeEventListener('scroll', this.boundScroll_);
+      this.boundScroll_ = null;
+    } else if (this.overscroll_ && !this.boundScroll_) {
+      this.boundScroll_ = this.scrollEventListener_.bind(this);
+      this.parentNode.scroller.addEventListener('scroll', this.boundScroll_);
+    }
+  },
+
+  /** @private */
+  scrollEventListener_: function() {
+    var scroller = this.parentNode.scroller;
+    var overscroll = this.$.overscroll;
+    var visibleBottom = scroller.scrollTop + scroller.clientHeight;
+    var overscrollBottom = overscroll.offsetTop + overscroll.scrollHeight;
+    // How much of the overscroll is visible (may be negative).
+    var visibleOverscroll = overscroll.scrollHeight -
+                            (overscrollBottom - visibleBottom);
+    this.overscroll_ = Math.max(0, visibleOverscroll);

[Dan Beam, 2016/08/03 22:04:59]

if this could share more with overscrollHeight_ that's cool, i.e. why can't this
be more similar to

  this.overscroll_ = this.overscrollHeight_();

?

[dschuyler, 2016/08/03 22:26:03]

I think the math looks similar off the cuff. I don't think
they'd combine well. The common bits appear to be

foo: function(a, b, c, d, e) {
  return Math.max(0, e - ((a + b) - (c + b)));
}

and then call foo() with two sets of five parameters. Would
adding a function like foo() help?

   },
 
   /**
@@ -128,7 +158,7 @@ Polymer({
       // Ensure any dom-if reflects the current properties.
       Polymer.dom.flush();
 
-      this.$.overscroll.style.paddingBottom = this.overscrollHeight_() + 'px';
+      this.overscroll_ = this.overscrollHeight_();
     }.bind(this));
   },