• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Absolutne menu na stronie w wersji mobile. Overflow-x hidden nie działa

VPS Starter Arubacloud
0 głosów
968 wizyt
pytanie zadane 24 listopada 2018 w HTML i CSS przez medamis Użytkownik (660 p.)

Cześć Wam! Pracuję nad szablonem strony i w wersji mobile chciałbym zrobić wysuwane menu. Menu wysuwa się ładnie i działa ale pozostawia po sobie przestrzeń która można podejrzeć na urządzeniu mobilnym. Menu ukrywam absolutnie za prawą krawędzią ekranu i przesuwam je transform translateX(100%). 

Tak wygląda strona zanim kliknę menu:

Tak to wygląda kiedy wysune menu:

Problem jest w tym że można przeskrolować w prawo i powstaje taka przestrzeń.

Używam overflow-x: hidden jednak to się nie sprawdza.

W kodzie menu wygląda tak (SASS):

@include tablet-mode
          
          position: absolute  
          right: -13%
          height: 100vh
          top: 0
          width: 80%
          display: flex
          flex-direction: column
          align-items: center
          background-color: rgba(55,66,75,0.99)
          justify-content: center
          transform: translateX(100%)
          transition: transform 0.5s
          z-index: 2

          @include smartphone
            
            width: 100%
const navigationSlide = () => {
  const burger = document.querySelector('.burger');
  const navbar = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');

  const body = document.querySelector('body');

  burger.addEventListener('click', () => {
    navbar.style.transform = navbar.style.transform === 'none' ? '' : 'none';

    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5}s`;
      }
    });
    burger.classList.toggle('toggle');
  });
};

navigationSlide();

Z góry dziękuję za pomoc :)

3 odpowiedzi

+1 głos
odpowiedź 24 listopada 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 25 listopada 2018 przez medamis
 
Najlepsza

Menu ukrywam absolutnie za prawą krawędzią ekranu i przesuwam je transform translateX(100%). 

I tu sam sobie stwarzasz problemy... :) Po co tak? Nie lepiej po prostu ukryć to menu i pokazywać dopiero na klika? Operacje translate itp. są mocno zasobożerne dla klienta, a takie wychodzenie po za body nie na wszystkich urządzeniach działa dobrze, to znaczy overflow nie zawsze zachowuje się tak, jakbyśmy tego oczekiwali...

Lepiej trzymać się rozwiązań standardowych, bo customowe pomysły często źle się kończą :) Kolejna rzecz to takie transformacje są często ciężkie do obsłużenia w testach automatycznych jeśli planowałbyś w przyszłości podpiąć jakąś regresję w projekcie.

komentarz 25 listopada 2018 przez medamis Użytkownik (660 p.)

Zrobiłem tak jak mówisz, dzięki za radę smiley

+1 głos
odpowiedź 24 listopada 2018 przez pablop76 VIP (123,060 p.)
Ogólnie nie wchodząc w szczegóły cała strona powinna być zamknięta w pojemnik, któremu nadajesz width: 100%; overflow-x: hidden;
komentarz 24 listopada 2018 przez medamis Użytkownik (660 p.)
body 
  overflow-x: hidden

tak jest szefie

komentarz 24 listopada 2018 przez pablop76 VIP (123,060 p.)
Dla body nie zawsze działa overflow:x:hidden; Pasek jest ukryty, ale ciągle można przewijać(przeciągać). Nie zagłebiałem się w szczegóły, więc nie odpowiem Ci dlaczego tak jest. Jest to chyba związanie z pozycjonowaniem elementów. Użycie pojemnika w moim przypadku rozwiązało problem.
+1 głos
odpowiedź 24 listopada 2018 przez Artur Koniec Gaduła (3,670 p.)

W wielkim skrócie, na urządzeniach mobilnych nie robisz tak:
 

<body style="overflow-x: hidden">
</body>

<!--To nie zadziała na telefonach-->

Należy utworzyć div obejmujący wszystko wewnątrz body i to jemu nadać overflow-x: hidden
 

<body>
 <div style="overflow-x: hidden">
  <!-- To Zadziała-->
 </div>
</body>

 

Podobne pytania

0 głosów
0 odpowiedzi 228 wizyt
0 głosów
1 odpowiedź 322 wizyt
0 głosów
1 odpowiedź 233 wizyt
pytanie zadane 12 stycznia 2020 w HTML i CSS przez januszkochany Nowicjusz (150 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...