Unplanned
Last Updated: 17 May 2021 11:36 by ADMIN
Akesh Gupta
Created on: 17 May 2021 11:36
Category: Window
Type: Feature Request
2
Maintain scroll position when opening Modal Kendo Windows with PreventScroll set to True

When opening a Window with modal and preventScroll: true on a page with scroll bars, the scroll position resets every time the window is opened and closed.

This is demonstrated in the Dojo example linked here. In the Dojo, scroll to the bottom and click the button to open the Window, the scroll position will change. 

Making the following modifications to the kendo.window.js file maintains the scroll position; would it be possible to add these modifications to a future release?

The code starts around line 912 of kendo.window.js

_stopDocumentScrolling: function () {
                var that = this;
                var containment = that.containment;
                if (containment && !that._isPinned) {
                    that._storeOverflowRule(containment);
                    containment.css(OVERFLOW, HIDDEN);
                    that.wrapper.css({
                        maxWidth: containment.innerWidth(),
                        maxHeight: containment.innerHeight()
                    });
                    return;
                }
                var $body = $('body');
                that._storeOverflowRule($body);
                $body.css(OVERFLOW, HIDDEN);
                // LSS: maintain scroll position when opening modal popup window
                var $html = $('html'),
                    scrollTop = $html.scrollTop();
                that._storeOverflowRule($html);
                $html.css(OVERFLOW, HIDDEN);
                // LSS: maintain scroll position when opening modal popup window
                $html.add($body).scrollTop(scrollTop);
            },
            _enableDocumentScrolling: function () {
                var that = this;
                var containment = that.containment;
                if (containment && !that._isPinned) {
                    that._restoreOverflowRule(containment);
                    that.wrapper.css({
                        maxWidth: containment.width,
                        maxHeight: containment.height
                    });
                    return;
                }
                that._restoreOverflowRule($(document.body));
                that._restoreOverflowRule($('html'));
            },
            _storeOverflowRule: function ($element) {
                if (this._isOverflowStored($element)) {
                    return;
                }
                var overflowRule = $element.get(0).style.overflow;
                if (typeof overflowRule === 'string') {
                    $element.data(DATADOCOVERFLOWRULE, overflowRule);
                    // LSS: maintain scroll position when opening modal popup window
                    $element.data('scrollTop', $element.scrollTop());
                }
            },
            _isOverflowStored: function ($element) {
                return typeof $element.data(DATADOCOVERFLOWRULE) === 'string';
            },
            _restoreOverflowRule: function ($element) {
                var overflowRule = $element.data(DATADOCOVERFLOWRULE);
                if (overflowRule !== null && overflowRule !== undefined) {
                    $element.css(OVERFLOW, overflowRule);
                    $element.removeData(DATADOCOVERFLOWRULE);
                    // LSS: maintain scroll position when opening modal popup window
                    var scrollTop = $element.data('scrollTop')
                    $element.scrollTop(scrollTop)
                    $element.removeData('scrollTop');
                } else {
                    $element.css(OVERFLOW, '');
                }
 },

0 comments