ako zmeniť veľkosť divu v závislosti od scrollingu? rubrika: Programování: JavaScript

6 Mlocik97
položil/-a 12.7.2017
 
upravil/-a 22.7.2017

Dobrý deň, potreboval by som aby sa mi plynule menila veľkosť divu v závislosti od scrollingu a to tak že presne o koľko PX prescrollujem, toľko sa pričíta px k hodnote height definovanej v CSS. Teda v mojom prípade mám height: calc(100% - 150px); napr. že prescrollujem napr. 49px taj potrebujem to prepočítať aby to bylo calc(100% - 101px); resp. [ calc(100% - 150px) ] + 49px...

najbližšie som došiel k niečomu takémuto:

function resize() {
            var el = $('nav#vertical, aside');
            var scrollTop = $(this).scrollTop();
            el.height(el.height() + (scrollTop || shift));
        };

ale nefunguje to.
Počul som aj o flexbox ale nie som si istý či je to onen spôsob ktorý potrebujem. Keďže "zostatkové miesto nie zvyšok miesta počítaného od šírky/výšky okna či nadriadeného elementu".

EDIT:

vyriešil som to:

var el = $('nav#vertical, aside');
        var elHeight = el.height();
        $(window).scroll(function () {
            var scrollTop = $(this).scrollTop();
            el.height(elHeight + scrollTop);
        });
odkaz Vyřešeno
8 rmaslo
odpověděl/-a 22.7.2017
 
upravil/-a 22.7.2017

Ještě bych zkontroloval jestli to ve Firefoxu nehází do konzole takovouhle hlášku:
+------------------------------
Tato stránka používá scroll-linked pozicovací efekt. Ten ale nemusí správně fungovat s asynchronním panningem. Pro více podrobností o tomto i dalších nástrojích a funkcích navštivte https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects.
+------------------------------
Tohle se totiž občas stává pokud je na scrollování navázáno pozicování či rozměry nějakého prvku. A mohu potvrdit, že byť to třeba na jednom kompu funguje dobře. tak na jiném (většinou pomalejším) to skáče jako prase, případně se to začne překreslovat furt dokola atd...
Abych řekl pravdu, tak jsem se s tím setkal několikrát a frut nejsem schopen, jen z pohledu na kód poznat, jestli takováhle změna stylu v závislosti na scrollu je korektní a která ne. Což bude možná tím, že jsme pořádně nepobral co je to ten "asynchronní panning".

Komentáře

  • Mlocik97 : čítam okolo toho ScrollLinkedEffects a asynchrónní padding, ale jaksi chápem čo je problém ale neviem ako ho vyriešiť.... — 22.7.2017

Pro zobrazení všech 2 odpovědí se prosím přihlaste:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.

Aktuální otázky v rubrice Programování: JavaScript

Otázky uživatele Mlocik97