Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Ucięta część diva kiedy scroll na samym dole w przeglądarce mobilnej
swiderek31
post 20.01.2021, 11:38:46
Post #1





Grupa: Zarejestrowani
Postów: 32
Pomógł: 0
Dołączył: 18.02.2017

Ostrzeżenie: (0%)
-----


Cześć, jak rozwiązać problem:

mam diva głównego szerokość 100%, wysokość 100vh

w głównym divie są dwa divy - lewy i prawy - mają po 50% szerokości i 100vh wysokości i float (left, right) z tym że lewy ma overflow-y: auto a prawy scroll. Na przeglądarkach komputerów (firefox, chrome, ie, opera) wygląda tak jak zamierzony efekt a na telefonie prawy div po skrolowaniu w dół - jego częśc (spód) jest zasłonięta przez pasem nawigacyjny telefonu.
Go to the top of the page
+Quote Post
trueblue
post 20.01.2021, 11:46:39
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


https://css-tricks.com/the-trick-to-viewpor...nits-on-mobile/


--------------------
Go to the top of the page
+Quote Post
swiderek31
post 20.01.2021, 12:12:31
Post #3





Grupa: Zarejestrowani
Postów: 32
Pomógł: 0
Dołączył: 18.02.2017

Ostrzeżenie: (0%)
-----


dziękuję trueblue za artykuł i szczególnie to zdanie mi rozjaśniło umysł: "If you opened your browser and started to load a website, 1vh was equal to 1% of your screen height, minus the browser interface. But! If you start scrolling, it’s a different story."

dlatego napisałem taką funkcję

  1. function vh_validation() {
  2.  
  3. if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  4.  
  5. var window_inner_h = $(window).innerHeight();
  6.  
  7. $("#right").css("height", window_inner_h + "px");
  8.  
  9. } else {
  10.  
  11. $("#right").css("height", "100vh");
  12.  
  13. }
  14.  
  15. }
  16.  
  17. vh_validation()
  18.  
  19. $(window).on('load scroll resize orientationchange', function(e) {
  20.  
  21. vh_validation()
  22.  
  23. });



Czyli: jak wykryje że przeglądarka jest mobilna to przy ładowaniu strony, scrollowaniu, resizingu i przy zmianie orientacji sprawdza wewnętrzną wysokość okna przeglądarki i dostosowuje wysokość prawego diva. Przetestowane na trzech różnych przeglądarkach w telefonie i 4 na komputerze - wszędzie działa aż miło. Chyba że byście coś dodali albo coś zmienili w kodzie żeby był jeszcze bardziej działający (wiecie o co chodzi smile.gif).
Go to the top of the page
+Quote Post
trueblue
post 20.01.2021, 12:18:10
Post #4





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Fajnie, ale w artykule jest dużo prościej:

Tak stylujesz element:
Cytat
  1. .my-element {
  2. height: 100vh;
  3. height: calc(var(--vh, 1vh) * 100);
  4. }


A tak ustawiasz wartość zmiennej --vh przy DOMContentLoaded, load, resize, orientationchage:

Cytat
  1. let vh = window.innerHeight * 0.01;
  2. document.documentElement.style.setProperty('--vh', `${vh}px`);


--------------------
Go to the top of the page
+Quote Post
swiderek31
post 20.01.2021, 12:24:19
Post #5





Grupa: Zarejestrowani
Postów: 32
Pomógł: 0
Dołączył: 18.02.2017

Ostrzeżenie: (0%)
-----


nie chciałem bezmyślnie kopiować tergo - do dziś nie wiedziałem że da się łączyć css z js w ten sposób (no ale zostane przy kodzie z artykułu). to teraz wszystko śmiga - dziękuję
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 01:20