Új hozzászólás Aktív témák

• #8482 Taci addikt

  Új Válasz 2021-04-04 12:00:49 #8482

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Taci

  addikt

  Sziasztok!

  (Bocsánat, csak ilyen hosszan leírva tudom elmagyarázni, mi is a probléma.)

  A template-ben amit használok (Bootstrap-alapon), van egy JS, ami a scroll-ozásért felel:
  smooth-scrollbar.js

  Ezeket az infókat látom róla benne kommentelt sorokban, hátha segít beazonosítani, hátha valami általánosabb JS:
  Copyright (c) Microsoft Corporation. All rights reserved.
  Licensed under the Apache License, Version 2.0 (the "License")
  * cast `I.Scrollbar` to `Scrollbar` to avoid error
  *
  * `I.Scrollbar` is not assignable to `Scrollbar`:
  * "privateProp" is missing in `I.Scrollbar`
  *
  * @see https://github.com/Microsoft/TypeScript/issues/2672

  Ahogy látom, ez a szkript a sidebar-ban van használva. Úgy találtam rá, hogy van a sidebar-ban pár elem, ami data-toggle="collapse" segítségével "bont ki" és "zár össze" tartalmakat (hogy több/kevesebb tartalmat mutasson), és most jött elő a következő hiba:

  Ha a sidebar alján lévő gombbal (data-toggle="collapse") bontom ki a tartalmat, és legörgetek a kibővített lista aljára, és az ott lévő gombbal bezárom ezt a listát (szintén data-toggle="collapse"), akkor nem scroll-oz vissza, és ha mondjuk egy oldalnyi plusz tartalmat mutatott pluszban, és most azt zárom be, akkor a sidebar kvázi üres lesz, mert a tartalmat már elrejtette, viszont az összezárt tartalom feljebb van, és már csak az üres területet mutatja. Aztán amint egy picit is scroll-ozok, ugrik egy hathalmasat, pontosan onnan folytatva, ahol a kibontás előtt állt.

  Ezen a ponton kezdtem el keresgetni, mi-hol is történik, és ekkor találtam rá, hogy a smooth-scrollbar.js végzi ezt a scroll-ozós számításokat.

  Azt találtam, hogy létrehoz egy scroll-content nevű class-t/osztályt, aminek folyamatos számítások alapján állítja be a transform stílust, konkrétan ezzel mozgatva a tartalmat, srollozás gyanánt.

  Ha a tetejére scroll-ozok, akkor:
  <div class="scroll-content" style="transform: translate3d(0px, 0px, 0px);">

  Ha a jelenlegi ablakméret aljára, akkor:
  <div class="scroll-content" style="transform: translate3d(0px, -291px, 0px);">
  
  Ha kibontom a tartalmat, és az aljára scroll-ozok, akkor:
  <div class="scroll-content" style="transform: translate3d(0px, -988px, 0px);">
  Tehát kb. 700 pixellel lejjebb visz/vagyok.

  Aztán itt jön a probléma, mert amikor összezárom a tartalma a data-toggle="collapse" segítségével, akkor konkrétan lent hagy az alján, -988px-en marad a transform, míg a tartalom már azt a kb. 700 pixelt visszazárta, így ott marad kb. 700 pixelnyi üres terület.
  
  Aztán ha egy picit is görgetek felfelé, akkor nem -988px-elről kezdi felfele a görgetést, hanem az azelőtti értékről, a -291px-ről.

  Szóval az a változó amit figyel, hogy meddig tart a tartalom alja, az már visszaállt a helyes értékre, a -291px-re, viszont a transform: translate3d()-vel nem "megy utána".
  
  Ezért arra gondoltam, hogy oké, akkor "utána küldöm" én:
  
  document.getElementsByClassName("scroll-content")[0].style.transform = "translate3d(0px, 0px, 0px)";

  És itt jött az a gond, hogy alapból nem akartam ezzel sokat vesződni, mert akkor mindig azt kéne néznem, hogy honnan indult a kibontás, mennyi pixelről, és oda küldeni vissza. Ehelyett inkább egyből a tetejére dobtam vissza (0px, 0px, 0px).

  Viszont itt láttam, hogy hiába a transform, attól még a -291px van bejegyezve, hogy ott állt meg legutóbb a scroll-ozás, így hiába dobom a tetejére, ha kicsit görgetek, újra -291px-elről folytatja.

  Van valakinek tapasztalata ezzel esetleg? Meg lehet ezt oldani valami egyszerű módon?
  Remélem, ez valami általánosabb JS (bár én sosem láttam még), és esetleg más is találkozott már ilyen "jelenséggel", így nem túl specifikus a kérdésem.

  Köszi!

Új hozzászólás Aktív témák