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

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

 // Copyright (c) 2012 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.
 
 /**
  * @fileoverview Provides dialog-like behaviors for the tracing UI.
  */
 cr.define('cr.ui.overlay', function() {
   /**
    * Gets the top, visible overlay. It makes the assumption that if multiple
@@ skipping 70 matching lines @@
    */
   function setMaxHeightAllPages() {
     var pages = document.querySelectorAll('.overlay .page');
 
     var maxHeight = Math.min(0.9 * window.innerHeight, 640) + 'px';
     for (var i = 0; i < pages.length; i++)
       pages[i].style.maxHeight = maxHeight;
   }
 
   /**
+   * 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.
    */
   function setupOverlay(overlay) {
     // Close the overlay on clicking any of the pages' close buttons.
     var closeButtons = overlay.querySelectorAll('.page > .close-button');
     for (var i = 0; i < closeButtons.length; i++) {
       closeButtons[i].addEventListener('click', function(e) {
         cr.dispatchSimpleEvent(overlay, 'cancelOverlay');
       });
     }
 
     // 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
         this.removeAttribute('hidden');
     });
     overlay.__defineGetter__('hidden', function() {
       return this.hasAttribute('hidden');
     });
 
     // Shake when the user clicks away.
@@ skipping 10 matching lines @@
     overlay.addEventListener('webkitAnimationEnd', function(e) {
       e.target.classList.remove('pulse');
     });
   }
 
   return {
     globalInitialization: globalInitialization,
     setupOverlay: setupOverlay,
   };
 });