Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: JS - Kinetic / Inertia scroll na Macu

Aktivity
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:12.8.2019 22:06

V JS nejsem rozený a úplně nevím, jak tenhle problém vyřešit dobře. Mám tuhle knihovnu https://www.cssscript.com/…-javascript/.

Problém je, že na Macu s MagicMouse a TrackPad existuje něco jako na mobilu (iOS / Android) Kinetic / Inertia scrolling (setrvačný scroll).

Tudíž při scrollu na webu (a při použítí MagicMouse a TrackPad) se to aktivuje a když neudělám malý scroll ale velký, tak mi to přeskočí 2+ sekcí (záleží jak moc uživatel scrollovat na tom zařízení).

Zkusil jsem: Napadlo mě použít časovač, tj. že JS počítá čas od poslední akce a zruší další akci pokud předchozí nastala před méně než 3 000 ms (to je čas k dokočení animace od předchozího k novému slidu).

Chci docílit: Výsledek má být takový, že má skočit jen o jednu sekci. To mi nevyšlo ... nějaký nápad ???

Odpovědět
12.8.2019 22:06
Však ono půjde ...
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:13.8.2019 8:11

Mezi nami devcaty, ten dotaz je uplne zmateny, neusporadany..
Musis to napsat tak, jako bys to vysvetloval sve 5 lete sestre. Jinak nini sance pochopit, co vlastne chces :)

Mas nejakou svou stranku. Link?
Na ni ti neco nejede. Neco, co nazyvas sekce. Co to je, odkud, pokud?
Neco, co pri scrolovani zlobi. Preskakuje a ty bys potreboval, aby to nedelalo.
Super, ale kdyz to nemame na cem otestovat? :)

Ten link, co jsi poslal pise: Nothing Here! A i kdyby ne, asi nebudu delat demo priklad pro cizi neznamou knihovnu.

https://www.cssscript.com/cross-plat...re-javascript/

V jquery existuje jakesi javascriptove scrolovani. Chova se to tak, ze od bodu A po B scroluje javascript. Tusim maji navazany js na udalosti onscroll. To by mozna vyresilo tvuj problem, prevzit nad scrolovanim kontrolu. Ale nevim, jak se to bude chovat pri pouziti tech tvych technologii.

Neco takoveho
https://www.cssscript.com/…topscroller/

Editováno 13.8.2019 8:13
 
Nahoru Odpovědět
13.8.2019 8:11
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:13.8.2019 8:17

https://www.cssscript.com/…page-scroll/
Top 100 / One page scroll
https://www.cssscript.com/…-javascript/#0

 
Nahoru Odpovědět
13.8.2019 8:17
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:13.8.2019 9:54

Sorry, na tom odkazu je všechno a vlastně si ho sám poslal - https://www.cssscript.com/…-javascript/.

Tohle používám. Žádný jQuery, pouze Vanilla JS. Proto tahle knihovna.

Nicméně tedy ještě jednou. Mac má 2 zařízení MagicMouse a TrackPad. Tyhle 2 dokáží na Macu udělat scroll malý / střední / velký.

Pointa je, že když udělám na tom zařízení malý scroll, JS té knihovny se aktivuje jednou a scrolluje se jedna sekce. To je ok

Problém nastává když scrolluji středně až hodně. V tom případě se totiž scroll funkce aktivuje vícekrát, protože prohlížeč sám o sobě předá tyhle informace - proto jsem uváděl Inertia / Kinetic scroll (dle toho se dá dohledat, co to vlastně je).

Výsledkem tedy má být že ať na Macu udělám jak chci velký scroll, tak se vždy aktivuje ta funkce pouze jednou a přesune se uživatel pouze a jenom o jednu sekci.

https://www.icloud.com/photos/#…

Nahoru Odpovědět
13.8.2019 9:54
Však ono půjde ...
Avatar
Ondřej Šrytr
Člen
Avatar
Odpovídá na Pavel Mareš
Ondřej Šrytr:14.8.2019 16:37

Ahoj,

vím, co máš na mysli, ale nic s tím neuděláš.

 
Nahoru Odpovědět
14.8.2019 16:37
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:14.8.2019 20:50

No před chvilkou jsem to vyřešil ... Pro představu:

  1. na wheel event mám napojenou funkci
  2. kontroluji pouze 1, -1 nebo 0 (-0 ... ano, JS je krásný jazyk)

AD 2) tohle dost vyblokuje, ale stále to projde, protože konec Kinetic / Inertia scrollu je to samé co začátek

  1. kontrola event.timeStamp ... pokud uživatel swipne během příliš krátké doby, típnu mu to

Kod:

fullScroll.prototype.buildPublicFunctions = function () {
        var mTouchStart = 0;
        var mTouchEnd = 0;
        var _self = this;
        var lastEvent = {};

        this.mouseWheelAndKey = function (event) {
                if ( event.deltaY > 1 || event.deltaY < -1 ) { return false; }

                var dif = event.timeStamp - lastEvent.timeStamp;
                if ( dif < 1600 ) { return false; }
                lastEvent = event;

                if (event.deltaY > 0 || event.keyCode == 40) {
                        _self.defaults.currentPosition ++;
                        _self.changeCurrentPosition(_self.defaults.currentPosition);
                } else if (event.deltaY < 0 || event.keyCode == 38) {
                        _self.defaults.currentPosition --;
                        _self.changeCurrentPosition(_self.defaults.currentPosition);
                }
                        _self.removeEvents();
        };

        // pokračování funkce ....
}

Není to bůhví jaká krása, ale očekávní to plní. Ještě to chce otestovat na Windlích, zda to nedělá bordel a funguje jak má, ale v základu to běhá.

Nahoru Odpovědět
14.8.2019 20:50
Však ono půjde ...
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:15.8.2019 8:10

Nemam to jak testovat, takze, stejne ti vic asi nepomuzu :)
Ja bych to resil jinak, pseudokod.

x = {}
x.move = 0;
x.mouseWheel = function () {if (x.move==0) {x.move = wheel>0 ? +1 : wheel<0: -1; x.scroll(); x.startTimer(); } return false;}
x.startTimer = function() {setTimeout(x.stopTimer, 1600);
x.stopTimer = function() {x.move = 0;);
window.event = x.mouseWheel;

Cili,

  1. eventy bych presmeroval na mou funkci.
  2. A v me funkci si do move ukladal +-1 nebo 1, pokud je move nulove. A podle toho bych provedl scroll o 1.
  3. Spustil casovac, ktery mi bude blokovat move X ms a pak ho vynuloval. Aby bylo mozne provest dalsi scroll [2]

Ale, ted nevim, jak vyvolat jen scroll 1.
Jen mi prijde, ze zablokovat vsechny vetsi scroly neni ono, ze pak musi uzivatel vypnout tu funkci nekde v nastaveni.

 
Nahoru Odpovědět
15.8.2019 8:10
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:15.8.2019 8:48

Něco podobného jsem taky zkoušel a ve výsledku to fungovalo stejně.

Cílem toho mého kódu je vzít zablokovat koncový dopad Kinetic scroll což mi při testování vyšlo na cca 1.5s. Proto těch 1.6s po kterých se až spustí event.

Kontroloval jsem v consoli výstupy z eventu a tohle byla nejsnazší cesta oproti všemu jinýmu - testoval jsem 5 různých verzí a tahle dopadla nejlépe.

Nahoru Odpovědět
15.8.2019 8:48
Však ono půjde ...
Avatar

Člen
Avatar
Odpovídá na Pavel Mareš
:15.8.2019 17:54

Rôzne operačné systémy ponúkajú na rôznych zariadeniach rôzne formy skrolovania. Aké konkrétne? Proste najvhodnejší možný typ skrolovania na tom ktorom zariadení. A v 99.99% prípadov nie je dôvod toto predvolené správanie meniť. Robiť to jednotným spôsobom skrz rôzne prehliadače na rôznych platformách je prácne, nie moc spoľahlivé a výsledný efekt nikto neocení. Zvyčajne naopak, ľudí akurát tak zmetie, zaskočí ich, že nejaká stránka sa správa v ich prehliadači inak ako drvivá väčšina ostatných. Preto prv než budeš pokračovať sa najskôr veľmi silno zamysli nad tým, či sa práve nezdrzuješ niečím, čo je nie len zbytočné, ale dokonca to ide proti UI/UX pravidlám. Tým si nie som úplne istý, ale dáva mi veľmi silnú logiku, že dobré UX sa takýmto veciam, predefinovávaniu predvoleného správania prehliadača, vyhýba...

 
Nahoru Odpovědět
15.8.2019 17:54
Avatar
Pavel Mareš
Tvůrce
Avatar
Odpovídá na
Pavel Mareš:16.8.2019 10:33

Díky za off-topic, nicméně je zbytečné tuto část příběhu řešit. Klientská práce je klientská práce a i když sem klientovi prezentoval UX argumenty, tak finální verdikt je finální verdikt, se kterým já nic neudělám a zbytečně lomcovat klienta nehodlám.

Ale když už jsme u tohoto ano, jsem proti omezování scrollu a udělal jsem pro klienta základní research proč to tak je, jaké to má výhody, nevýhody, proč by to mělo zůstat tak jak je + vysvětlení celé problematiky scroll-jackingu.

Editováno 16.8.2019 10:34
Nahoru Odpovědět
16.8.2019 10:33
Však ono půjde ...
Avatar

Člen
Avatar
Odpovídá na Pavel Mareš
:16.8.2019 12:37

Nerozumiem celkom čím je to off-topic, keď v reakcii píšeš, že to, čo som ti napísal, si aj urobil, navyše si to urobil zrovna z dôvodov, ktoré som uviedol. Asi to skôr myslíš tak, že "dík, to už som skúsil, neprešlo, musí to byť takto"...

V tom prípade želám veľa šťastia, mlhavo tuším, že pri takomto type zákazníka ho budete potrebovať.

 
Nahoru Odpovědět
16.8.2019 12:37
Avatar
Pavel Mareš
Tvůrce
Avatar
Odpovídá na
Pavel Mareš:16.8.2019 13:08

No jednak už jsem to zkusil a neprošlo. Jednak s tebou souhlasím, že scroll-jacking a smooth scroll a podobné blbosti akorát mrví požítek.

Nicméně off-topic proto, že tohle je diskuze o tom, jak v Javascriptu udělat nějakou specifickou funkci a ne o tom, zda to je či není správné. Což je definice off-topicu = komentář na jiné téma, než je původní diskuze.

Nicméně rozumím, že někteří členové to nemusí vědět a proto jsem poděkoval za off-topic. Protože teoreticky může edukovat někoho, kdo na to narazí nezná to.

Editováno 16.8.2019 13:10
Nahoru Odpovědět
16.8.2019 13:08
Však ono půjde ...
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:18.8.2019 17:00

A poslední update, nakonec vše vyřešeno díky pomoci a knihovně Lethargy (https://github.com/d4nyll/lethargy). Nejsem programátor, tudíž když jsem zkoušel nevyšlo, ale někdo to udělal a funguje skvěle.

Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět
18.8.2019 17:00
Však ono půjde ...
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:19.8.2019 8:06

Ten kod tam ma akorat timestamp. Nehledal jsem tu funkcni cast, ale nejspi to ma navazane na event nebo setInterval.

 
Nahoru Odpovědět
19.8.2019 8:06
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:19.8.2019 8:17

Jak říkám, nejsem skrz JS, ale když zkouším verti s Lethargy, funguje to přesně dle očekávání. Prostě Kinetic / Inertia scroll je fuč a neomezuje to časově (moje verze nutila uživatele čekat).

Nahoru Odpovědět
19.8.2019 8:17
Však ono půjde ...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 15 zpráv z 15.