Hide small right/left block once they're scrolled out of view

Web/Presenters/templates/Group/View.xml

@@ -261,3 +261,7 @@
 </div>
 
 {/block}
+
+{block bodyScripts}
+    {script "js/al_despacito_wall.js"}
+{/block}

Web/Presenters/templates/User/View.xml

@@ -711,3 +711,7 @@
         {include "banned.xml"}
     {/if}
 {/block}
+
+{block bodyScripts}
+    {script "js/al_despacito_wall.js"}
+{/block}

Web/static/css/main.css

@@ -2308,3 +2308,12 @@ a.poll-retract-vote {
     border-bottom: 1px dotted #8b8b8b;
     z-index: 10;
 }
+
+.page_content.overscrolled div[class$="_small_block"] {
+    position: absolute;
+    visibility: hidden;
+}
+
+.page_content.overscrolled div[class$="_big_block"] {
+    width: unset;
+}

Web/static/js/al_despacito_wall.js

@@ -0,0 +1,27 @@
+const contentPage = document.querySelector(".page_content");
+const rootElement = document.documentElement;
+
+let smallBlockObserver = new IntersectionObserver(entries => {
+    entries.forEach(x => {
+        window.requestAnimationFrame(() => {
+            let pastHeight = contentPage.getBoundingClientRect().height;
+            if(x.isIntersecting)
+                contentPage.classList.remove("overscrolled");
+            else
+                contentPage.classList.add("overscrolled");
+
+            let currentHeight = contentPage.getBoundingClientRect().height;
+            let ratio         = currentHeight / pastHeight;
+
+            rootElement.scrollTop *= ratio;
+        }, contentPage);
+    });
+}, {
+    root: null, // screen
+    rootMargin: "0px",
+    threshold: 0
+});
+
+let smol = document.querySelector('div[class$="_small_block"]');
+if(smol != null)
+    smallBlockObserver.observe(smol);