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

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

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ę

odpowiedź 24 listopada 2018 przez pablop76 VIP (123,120 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,120 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.