Make the body not scrollable and make a scrollable container div to host #extension-settings.

ui/webui/resources/js/cr/ui/overlay.js

Index: ui/webui/resources/js/cr/ui/overlay.js
diff --git a/ui/webui/resources/js/cr/ui/overlay.js b/ui/webui/resources/js/cr/ui/overlay.js
index 5c0acb2d3dd826d52e3f76e1a3de7b7127671043..694f49a86e65062491393459e7967a70af4d393a 100644
--- a/ui/webui/resources/js/cr/ui/overlay.js
+++ b/ui/webui/resources/js/cr/ui/overlay.js
@@ -88,6 +88,17 @@ cr.define('cr.ui.overlay', function() {
   }
 
   /**
+   * Called when a overlay is shown or hidden to update the scrollability of
+   * root document body based on this overlay's visibility.
+   */
+  function onVisibilityChanged(visible) {

[xiyuan, 2013/08/13 17:23:35]

|visible| is mis-leading. It looks more like hidden.

[zhchbin, 2013/08/14 06:54:30]

Done.

+    if (visible)
+      document.body.classList.remove('no-scroll');
+    else
+      document.body.classList.add('no-scroll');
+  }
+
+  /**
    * Adds behavioral hooks for the given overlay.
    * @param {HTMLElement} overlay The .overlay.
    */
@@ -103,6 +114,9 @@ cr.define('cr.ui.overlay', function() {
     // Remove the 'pulse' animation any time the overlay is hidden or shown.
     overlay.__defineSetter__('hidden', function(value) {
       this.classList.remove('pulse');
+      if (value != this.hasAttribute('hidden'))
+        onVisibilityChanged(value);
+
       if (value)
         this.setAttribute('hidden', true);
       else