Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ CSS _ Ucięta część diva kiedy scroll na samym dole w przeglądarce mobilnej

Napisany przez: swiderek31 20.01.2021, 11:38:46

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.

Napisany przez: trueblue 20.01.2021, 11:46:39

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Napisany przez: swiderek31 20.01.2021, 12:12:31

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ę

[PHP] pobierz, plaintext 
    function vh_validation() {
 
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
 
            var window_inner_h = $(window).innerHeight();
 
            $("#right").css("height", window_inner_h + "px");
 
        } else {
 
            $("#right").css("height", "100vh");    
 
        }
 
    }
 
    vh_validation()
 
    $(window).on('load scroll resize orientationchange', function(e) {
 
        vh_validation()
 
    });
[PHP] pobierz, plaintext

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

Napisany przez: trueblue 20.01.2021, 12:18:10

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

Tak stylujesz element:

Cytat

[HTML] pobierz, plaintext 
.my-element {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
[HTML] pobierz, plaintext

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

Cytat

[HTML] pobierz, plaintext 
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
[HTML] pobierz, plaintext

Napisany przez: swiderek31 20.01.2021, 12:24:19

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ę