Harden SlimSelect scroll lock on macOS browsers

contao/templates/frontend/event_filter.html.twig

@@ -81,6 +81,11 @@
     #eventfilters .eventfilter-reset[hidden] {
         display: none;
     }
+
+    #eventfilters .ss-content,
+    #eventfilters .ss-list {
+        overscroll-behavior: contain;
+    }
 </style>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.css">
@@ -332,5 +337,125 @@
         applyFilter({ type: 'all', value: 'all' });
     });
 
+    const getDropdownFromTarget = (target) => {
+        if (!(target instanceof Element)) {
+            return null;
+        }
+
+        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) {
+            return null;
+        }
+
+        if (!targetDropdown) {
+            return openDropdown;
+        }
+
+        const contentContainer = targetDropdown.closest('.ss-content');
+        return contentContainer || openDropdown;
+    };
+
+    const shouldBlockBoundaryScroll = (scrollContainer, delta) => {
+        if (!scrollContainer) {
+            return false;
+        }
+
+        if (scrollContainer.scrollHeight <= scrollContainer.clientHeight) {
+            return true;
+        }
+
+        if (delta === 0) {
+            return false;
+        }
+
+        const top = scrollContainer.scrollTop;
+        const height = scrollContainer.clientHeight;
+        const scrollHeight = scrollContainer.scrollHeight;
+
+        const atTop = top <= 0;
+        const atBottom = top + height >= scrollHeight - 1;
+
+        return (atTop && delta < 0) || (atBottom && delta > 0);
+    };
+
+    let lastTouchY = null;
+
+    document.addEventListener('wheel', (event) => {
+        const dropdown = getDropdownFromTarget(event.target);
+        const scrollContainer = getScrollContainer(dropdown);
+
+        if (!scrollContainer) {
+            return;
+        }
+
+        if (shouldBlockBoundaryScroll(scrollContainer, event.deltaY)) {
+            event.preventDefault();
+        }
+
+        event.stopPropagation();
+    }, { passive: false, capture: true });
+
+    document.addEventListener('touchstart', (event) => {
+        const dropdown = getDropdownFromTarget(event.target);
+        const scrollContainer = getScrollContainer(dropdown);
+
+        if (!scrollContainer || event.touches.length === 0) {
+            lastTouchY = null;
+            return;
+        }
+
+        lastTouchY = event.touches[0].clientY;
+    }, { passive: true, capture: true });
+
+    document.addEventListener('touchmove', (event) => {
+        const dropdown = getDropdownFromTarget(event.target);
+        const scrollContainer = getScrollContainer(dropdown);
+
+        if (!scrollContainer || event.touches.length === 0 || lastTouchY === null) {
+            return;
+        }
+
+        const currentTouchY = event.touches[0].clientY;
+        const delta = lastTouchY - currentTouchY;
+
+        if (shouldBlockBoundaryScroll(scrollContainer, delta)) {
+            event.preventDefault();
+        }
+
+        event.stopPropagation();
+
+        lastTouchY = currentTouchY;
+    }, { passive: false, capture: true });
+
+    document.addEventListener('touchend', () => {
+        lastTouchY = null;
+    }, { passive: true, capture: true });
+
+    document.addEventListener('touchcancel', () => {
+        lastTouchY = null;
+    }, { passive: true, capture: true });
+
     applyFilter(currentFilter);
 </script>