From 63a36e9714725591d65f6c7ffd98940dcd2b8aa4 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Thu, 8 Sep 2016 21:59:54 +0200 Subject: [PATCH] Prevent scrolling inside dialogs from scrolling overall page --- .../files/js/WoltLabSuite/Core/Ui/Dialog.js | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js index 7cfb8ecc7f..bed77c574d 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js @@ -43,6 +43,11 @@ define( _container.classList.add('dialogOverlay'); elAttr(_container, 'aria-hidden', 'true'); _container.addEventListener(WCF_CLICK_EVENT, this._closeOnBackdrop.bind(this)); + _container.addEventListener('wheel', function (event) { + if (event.target === _container) { + event.preventDefault(); + } + }); elById('content').appendChild(_container); @@ -303,6 +308,16 @@ define( if (options.disableContentPadding) contentContainer.classList.add('dialogContentNoPadding'); dialog.appendChild(contentContainer); + contentContainer.addEventListener('wheel', function (event) { + // positive value: scrolling up + if (event.wheelDelta > 0 && contentContainer.scrollTop === 0) { + event.preventDefault(); + } + else if (event.wheelDelta < 0 && (contentContainer.scrollTop + contentContainer.clientHeight === contentContainer.scrollHeight)) { + event.preventDefault(); + } + }); + var content; if (element === null) { if (typeof html === 'string') { @@ -437,7 +452,7 @@ define( formSubmit.classList.add('dialogFormSubmit'); unavailableHeight += DomUtil.outerHeight(formSubmit); - contentContainer.style.setProperty('margin-bottom', unavailableHeight + 'px'); + contentContainer.style.setProperty('margin-bottom', unavailableHeight + 'px', ''); } else { contentContainer.classList.remove('dialogForm'); @@ -447,12 +462,12 @@ define( unavailableHeight += DomUtil.outerHeight(data.header); var maximumHeight = (window.innerHeight * (_dialogFullHeight ? 1 : 0.8)) - unavailableHeight; - contentContainer.style.setProperty('max-height', ~~maximumHeight + 'px'); + contentContainer.style.setProperty('max-height', ~~maximumHeight + 'px', ''); // fix for a calculation bug in Chrome causing the scrollbar to overlap the border if (Environment.browser() === 'chrome') { if (data.content.scrollHeight > maximumHeight) { - data.content.style.setProperty('margin-right', '-1px'); + data.content.style.setProperty('margin-right', '-1px', ''); } else { data.content.style.removeProperty('margin-right'); -- 2.20.1