Prevent the page from resizing when opening options and removing scrollbars.

4chan_x.user.js

@@ -2366,7 +2366,8 @@
       });
       $.add(overlay, dialog);
       $.add(d.body, overlay);
-      d.body.style.setProperty('overflow', 'hidden', null);
+      d.body.style.setProperty('width', "" + d.body.clientWidth + "px", null);
+      $.addClass(d.body, 'unscroll');
       Options.backlink.call(back);
       Options.time.call(time);
       Options.fileInfo.call(fileInfo);
@@ -2374,7 +2375,8 @@
     },
     close: function() {
       $.rm(this);
-      return d.body.style.removeProperty('overflow');
+      d.body.style.removeProperty('width');
+      return $.rmClass(d.body, 'unscroll');
     },
     clearHidden: function() {
       $["delete"]("hiddenReplies/" + g.BOARD + "/");
@@ -4623,6 +4625,13 @@ textarea.field {\
   right: 5px;\
 }\
 \
+body {\
+  box-sizing: border-box;\
+  -moz-box-sizing: border-box;\
+}\
+body.unscroll {\
+  overflow: hidden;\
+}\
 #overlay {\
   top: 0;\
   right: 0;\

script.coffee

@@ -1838,7 +1838,8 @@ Options =
     $.on dialog,  'click', (e) -> e.stopPropagation()
     $.add overlay, dialog
     $.add d.body, overlay
-    d.body.style.setProperty 'overflow', 'hidden', null
+    d.body.style.setProperty 'width', "#{d.body.clientWidth}px", null
+    $.addClass d.body, 'unscroll'
 
     Options.backlink.call back
     Options.time.call     time
@@ -1847,7 +1848,8 @@ Options =
 
   close: ->
     $.rm this
-    d.body.style.removeProperty 'overflow'
+    d.body.style.removeProperty 'width'
+    $.rmClass d.body, 'unscroll'
 
   clearHidden: ->
     #'hidden' might be misleading; it's the number of IDs we're *looking* for,
@@ -3578,6 +3580,13 @@ textarea.field {
   right: 5px;
 }
 
+body {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+body.unscroll {
+  overflow: hidden;
+}
 #overlay {
   top: 0;
   right: 0;