From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 8 Sep 2016 19:59:54 +0000 (+0200)
Subject: Prevent scrolling inside dialogs from scrolling overall page
X-Git-Tag: 3.0.0_Beta_1~254
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=63a36e9714725591d65f6c7ffd98940dcd2b8aa4;p=GitHub%2FWoltLab%2FWCF.git

Prevent scrolling inside dialogs from scrolling overall page
---

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');