Avoid page jumping when scrolling is disabled
authorTim Düsterhus <duesterhus@woltlab.com>
Thu, 1 Sep 2016 01:36:27 +0000 (03:36 +0200)
committerTim Düsterhus <duesterhus@woltlab.com>
Thu, 1 Sep 2016 01:56:31 +0000 (03:56 +0200)
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js

index 50f3f7f36131d42f1c50c5907ab4c1ff3853cefd..ec9e726feb1f931e419e5607d3863bb77c16d964 100644 (file)
@@ -11,6 +11,7 @@ define(['Core', 'Dictionary'], function(Core, Dictionary) {
        
        var _mql = new Dictionary();
        var _scrollDisableCounter = 0;
+       var _scrollOffsetFrom;
        
        var _mqMap = Dictionary.fromObject({
                'screen-xs': '(max-width: 544px)',                              /* smartphone */
@@ -95,6 +96,14 @@ define(['Core', 'Dictionary'], function(Core, Dictionary) {
                 */
                scrollDisable: function() {
                        if (_scrollDisableCounter === 0) {
+                               var h = document.body.scrollTop;
+                               _scrollOffsetFrom = 'body';
+                               if (!h) {
+                                       h = document.documentElement.scrollTop;
+                                       _scrollOffsetFrom = 'documentElement';
+                               }
+                               
+                               elById('pageContainer').style.setProperty('transform', 'translateY(-' + h + 'px)');
                                document.documentElement.classList.add('disableScrolling');
                        }
                        
@@ -110,6 +119,11 @@ define(['Core', 'Dictionary'], function(Core, Dictionary) {
                                
                                if (_scrollDisableCounter === 0) {
                                        document.documentElement.classList.remove('disableScrolling');
+                                       var h = elById('pageContainer').style.getPropertyValue('transform').match(/translateY\(-(\d+)px\)/);
+                                       elById('pageContainer').style.removeProperty('transform');
+                                       if (h) {
+                                               document[_scrollOffsetFrom].scrollTop = ~~h[1];
+                                       }
                                }
                        }
                },