diff --git a/contao/templates/frontend/event_filter.html.twig b/contao/templates/frontend/event_filter.html.twig index 4e4331b..def41f8 100644 --- a/contao/templates/frontend/event_filter.html.twig +++ b/contao/templates/frontend/event_filter.html.twig @@ -345,48 +345,31 @@ return target.closest('.ss-content, .ss-list'); }; - const getOpenDropdown = () => { - const openContent = document.querySelector('.ss-content.ss-open'); - - if (openContent) { - return openContent; - } - - const openMain = document.querySelector('.ss-main.ss-open'); - - if (!openMain) { - return null; - } - - const scope = openMain.parentElement || document; - return scope.querySelector('.ss-content'); - }; - const getScrollContainer = (targetDropdown) => { - const openDropdown = getOpenDropdown(); - - if (!openDropdown) { + if (!targetDropdown) { return null; } - if (!targetDropdown) { - return openDropdown; + if (targetDropdown.scrollHeight > targetDropdown.clientHeight) { + return targetDropdown; } - const contentContainer = targetDropdown.closest('.ss-content'); - return contentContainer || openDropdown; + const contentContainer = targetDropdown.closest('.ss-content') || targetDropdown; + const listContainer = contentContainer.querySelector('.ss-list'); + + if (listContainer && listContainer.scrollHeight > listContainer.clientHeight) { + return listContainer; + } + + if (contentContainer.scrollHeight > contentContainer.clientHeight) { + return contentContainer; + } + + return null; }; const shouldBlockBoundaryScroll = (scrollContainer, delta) => { - if (!scrollContainer) { - return false; - } - - if (scrollContainer.scrollHeight <= scrollContainer.clientHeight) { - return true; - } - - if (delta === 0) { + if (!scrollContainer || delta === 0) { return false; } @@ -404,12 +387,12 @@ document.addEventListener('wheel', (event) => { const dropdown = getDropdownFromTarget(event.target); - const scrollContainer = getScrollContainer(dropdown); - - if (!scrollContainer) { + if (!dropdown) { return; } + const scrollContainer = getScrollContainer(dropdown); + if (shouldBlockBoundaryScroll(scrollContainer, event.deltaY)) { event.preventDefault(); } @@ -419,9 +402,7 @@ document.addEventListener('touchstart', (event) => { const dropdown = getDropdownFromTarget(event.target); - const scrollContainer = getScrollContainer(dropdown); - - if (!scrollContainer || event.touches.length === 0) { + if (!dropdown || event.touches.length === 0) { lastTouchY = null; return; } @@ -431,9 +412,13 @@ document.addEventListener('touchmove', (event) => { const dropdown = getDropdownFromTarget(event.target); + if (!dropdown || event.touches.length === 0 || lastTouchY === null) { + return; + } + const scrollContainer = getScrollContainer(dropdown); - if (!scrollContainer || event.touches.length === 0 || lastTouchY === null) { + if (!scrollContainer) { return; }