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

This commit is contained in:
celestora 2023-05-26 18:21:56 +03:00
parent 43541b9136
commit d365bb6b95
4 changed files with 44 additions and 0 deletions

View file

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

View file

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

View file

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

View file

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