Skip to content
Permalink
Browse files

MDL-51451 Moodle dialogues: Lock scroll causes background jump

When you add a module or otherwise cause a Moodle dialogue to appear, this
enables the 'lock scroll' feature (the scrollbar disappears).

On some browsers this causes the width of the viewport to change, which can
cause centered/right-aligned theme elements to move distractingly.

This change temporarily sets body max-width while lock scroll is active.
  • Loading branch information...
sammarshallou committed Sep 17, 2015
1 parent 35d3e8b commit a0ef17628a550bc0e19fa8bf65e32b603af016d3
@@ -71,6 +71,9 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
this._enabled = true;
var body = Y.one(Y.config.doc.body);

// Get width of body before turning on lockscroll.
var widthBefore = body.getComputedStyle('width');

// We use a CSS class on the body to handle the actual locking.
body.addClass('lockscroll');

@@ -83,6 +86,13 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
Y.log("Setting the activeScrollLocks count from " + currentCount + " to " + newCount,
'debug', 'moodle-core-lockscroll');

// When initially enabled, set the body max-width to its current width. This
// avoids centered elements jumping because the width changes when scrollbars
// disappear.
if (currentCount === 0) {
body.setStyle('maxWidth', widthBefore);
}

return this;
},

@@ -109,6 +119,7 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []

if (currentCount === 1) {
body.removeClass('lockscroll');
body.setStyle('maxWidth', null);
}

body.setAttribute('data-activeScrollLocks', currentCount - 1);

Some generated files are not rendered by default. Learn more.

@@ -68,6 +68,9 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
this._enabled = true;
var body = Y.one(Y.config.doc.body);

// Get width of body before turning on lockscroll.
var widthBefore = body.getComputedStyle('width');

// We use a CSS class on the body to handle the actual locking.
body.addClass('lockscroll');

@@ -78,6 +81,13 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
newCount = currentCount + 1;
body.setAttribute('data-activeScrollLocks', newCount);

// When initially enabled, set the body max-width to its current width. This
// avoids centered elements jumping because the width changes when scrollbars
// disappear.
if (currentCount === 0) {
body.setStyle('maxWidth', widthBefore);
}

return this;
},

@@ -103,6 +113,7 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []

if (currentCount === 1) {
body.removeClass('lockscroll');
body.setStyle('maxWidth', null);
}

body.setAttribute('data-activeScrollLocks', currentCount - 1);
@@ -69,6 +69,9 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
this._enabled = true;
var body = Y.one(Y.config.doc.body);

// Get width of body before turning on lockscroll.
var widthBefore = body.getComputedStyle('width');

// We use a CSS class on the body to handle the actual locking.
body.addClass('lockscroll');

@@ -81,6 +84,13 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
Y.log("Setting the activeScrollLocks count from " + currentCount + " to " + newCount,
'debug', 'moodle-core-lockscroll');

// When initially enabled, set the body max-width to its current width. This
// avoids centered elements jumping because the width changes when scrollbars
// disappear.
if (currentCount === 0) {
body.setStyle('maxWidth', widthBefore);
}

return this;
},

@@ -107,6 +117,7 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []

if (currentCount === 1) {
body.removeClass('lockscroll');
body.setStyle('maxWidth', null);
}

body.setAttribute('data-activeScrollLocks', currentCount - 1);

0 comments on commit a0ef176

Please sign in to comment.
You can’t perform that action at this time.