• 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

0 głosów
75 wizyt
pytanie zadane 24 listopada 2018 w HTML i CSS przez medamis Użytkownik (640 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 Mędrzec (175,420 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 (640 p.)

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

+1 głos
odpowiedź 24 listopada 2018 przez pablop76 Szeryf (90,930 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 (640 p.)
body 
  overflow-x: hidden

tak jest szefie

komentarz 24 listopada 2018 przez pablop76 Szeryf (90,930 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 Bywalec (2,150 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
1 odpowiedź 125 wizyt
0 głosów
0 odpowiedzi 79 wizyt
pytanie zadane 30 kwietnia 2017 w HTML i CSS przez Reytgarr Nowicjusz (120 p.)
0 głosów
1 odpowiedź 128 wizyt
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

63,199 zapytań

109,436 odpowiedzi

228,619 komentarzy

42,948 pasjonatów

Przeglądających: 60
Pasjonatów: 2 Gości: 58

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...