diff -r fd2a78968403 chrome/content/InputHandler.js
--- a/chrome/content/InputHandler.js	Wed Feb 10 14:58:37 2010 -0500
+++ b/chrome/content/InputHandler.js	Fri Feb 12 19:13:15 2010 +0100
@@ -749,19 +749,22 @@ MouseModule.prototype = {
   _defaultDragger: {
     isDraggable: function isDraggable(target, scroller) {
       let sX = {}, sY = {};
       scroller.getScrolledSize(sX, sY);
       let rect = target.getBoundingClientRect();
       return sX.value > rect.width || sY.value > rect.height;
     },
 
-    dragStart: function dragStart(cx, cy, target, scroller) {},
+    dragStart: function dragStart(cx, cy, target, scroller) {
+      scroller.element.setAttribute("panning", "true");
+    },
 
     dragStop : function dragStop(dx, dy, scroller) {
+      scroller.element.removeAttribute("panning");
       return this.dragMove(dx, dy, scroller);
     },
 
     dragMove : function dragMove(dx, dy, scroller) {
       if (scroller.getPosition) {
         try {
 
           let oldX = {}, oldY = {};
diff -r fd2a78968403 chrome/content/browser.js
--- a/chrome/content/browser.js	Wed Feb 10 14:58:37 2010 -0500
+++ b/chrome/content/browser.js	Fri Feb 12 19:13:15 2010 +0100
@@ -1281,16 +1281,18 @@ Browser.MainDragger = function MainDragg
 
 Browser.MainDragger.prototype = {
   isDraggable: function isDraggable(target, scroller) { return true; },
 
   dragStart: function dragStart(clientX, clientY, target, scroller) {
     // Make sure pausing occurs before any early returns.
     this.bv.pauseRendering();
 
+    scroller.element.setAttribute("panning", "true");
+
     // XXX shouldn't know about observer
     // adding pause in pauseRendering isn't so great, because tiles will hardly ever prefetch while
     // loading state is going (and already, the idle timer is bigger during loading so it doesn't fit
     // into the aggressive flag).
     this.bv._idleServiceObserver.pause();
 
     let [x, y] = Browser.transformClientToBrowser(clientX, clientY);
     let element = Browser.elementFromPoint(x, y);
@@ -1348,16 +1350,17 @@ Browser.MainDragger.prototype = {
   },
 
   dragStop: function dragStop(dx, dy, scroller) {
     this.draggedFrame = null;
     this.dragMove(Browser.snapSidebars(), 0, scroller);
 
     Browser.tryUnfloatToolbar();
 
+    scroller.element.removeAttribute("panning");
     this.bv.resumeRendering();
 
     // XXX shouldn't know about observer
     this.bv._idleServiceObserver.resume();
   },
 
   dragMove: function dragMove(dx, dy, scroller) {
     let elem = this.draggedFrame;
diff -r fd2a78968403 chrome/content/browser.xul
--- a/chrome/content/browser.xul	Wed Feb 10 14:58:37 2010 -0500
+++ b/chrome/content/browser.xul	Fri Feb 12 19:13:15 2010 +0100
@@ -233,17 +233,17 @@
             </box>
           </box>
 
           <notificationbox id="notifications" class="window-width"/>
 
           <!-- Content viewport -->
           <vbox class="window-width window-height">
             <stack id="tile-stack" class="window-width" flex="1">
-              <scrollbox id="content-scrollbox" style="overflow: hidden;" class="window-width" flex="1">
+              <scrollbox id="content-scrollbox" class="window-width" flex="1">
                 <!-- Content viewport -->
                 <html:div id="tile-container" style="overflow: hidden;">
                   <html:canvas id="content-overlay" style="display: none; position: absolute; z-index: 1000;">
                   </html:canvas>
                 </html:div>
               </scrollbox>
               <html:canvas id="view-buffer" style="display: none;" moz-opaque="true">
               </html:canvas>
diff -r fd2a78968403 chrome/content/content.css
--- a/chrome/content/content.css	Wed Feb 10 14:58:37 2010 -0500
+++ b/chrome/content/content.css	Fri Feb 12 19:13:15 2010 +0100
@@ -54,32 +54,72 @@ html button::-moz-focus-inner, input[typ
   border: 0px !important;
 } 
 
 html button:focus::-moz-focus-inner, input[type="reset"]:focus::-moz-focus-inner, input[type="button"]:focus::-moz-focus-inner, input[type="submit"]:focus::-moz-focus-inner {
   border-color: ButtonText !important;
 }
 
 /* Style the scrollbars */
-scrollbar {
+scrollbar[orient="vertical"] {
   -moz-appearance: none !important;
-  display: none !important;
+  visibility: hidden;
+  position: relative;
+  min-width: 12px;
+  margin-left: -12px;
+  background-color: transparent !important;
+  background-image: none !important;
+  z-index: 1 !important;
+}
+
+scrollbar[orient="horizontal"] {
+  -moz-appearance: none !important;
+  position: relative;
+  visibility: hidden;
+  min-height: 12px;
+  margin-top: -12px;
+  background-color: transparent !important;
+  background-image: none !important;
+  z-index: 1 !important;
+}
+
+/* The z-index is forced here otherwise the scrollbars are draw beneath the content */
+#content-scrollbox > #tile-container {
+  z-index: 0 !important;
+}
+
+scrollbar[orient="vertical"] thumb {
+  max-width: 8px !important;
+}
+
+scrollbar[orient="horizontal"] thumb {
+  max-height: 8px !important;
+}
+
+*[panning] scrollbar {
+  visibility: visible !important;
+}
+
+scrollbox {
+  overflow-y: scroll;
+  overflow-x: scroll;
 }
 
 scrollbarbutton {
   -moz-appearance: none !important;
   display: none !important;
 }
 
 thumb {
-  min-width: 10px !important;
-  -moz-appearance: none !important;
-  background-color: gray !important;
-  border: 1px solid gray !important;
-  -moz-border-radius: 4px !important;
+  background-color: rgba(192, 192, 192, 0.75) !important;
+  -moz-border-top-colors: none !important;
+  -moz-border-bottom-colors: none !important;
+  -moz-border-right-colors: none !important;
+  -moz-border-left-colors: none !important;
+  border: 1px solid rgb(192, 192, 192) !important;
 }
 
 select:not([size]) > scrollbar,
 select[size="1"] > scrollbar,
 select:not([size]) scrollbarbutton,
 select[size="1"] scrollbarbutton {
   display:block !important;
 }