28112 sujets

CSS et mise en forme, CSS3

[Résolu] [Bug] Probleme scroll mobile

Bonjour ! j'ai creer mon site et j'ai fait plusieur version avec @media (max-width=768px) je veux désactiver le scroll x ce que j'ai fait avec 
  body {
    overflow-x: hidden;
  }


mais lorsque l'on ouvre la page sur mobile nous pouvons quand meme scroll sur le coter

Mon site si vous voulez verifier par vous meme : https://unknowww1.000webhostapp.com/#

Mes code 


<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title> PurpleRain / IG </title>
    <link rel="icon" href="Favicon/tuxpi-removebg-preview__1_-removebg-preview.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Css Link -->
    <link rel="stylesheet" href="Css/Header.css">
    <!-- Font Link -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:700&display=swap" rel="stylesheet">
  </head>
  <body>
    <!-- Navigation / Header -->
      <nav class="header">
        <div class="name-nav">
          <h1>PurpleRain</h1>
        </div>
        <ul class="link-nav" id="link">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Another</a>
          </li>
          <li>
            <a href="#">Linkinbio</a>
          </li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
      </nav>
      <script src="Js/Header.js"></script>
  </body>
</html>




* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

/* Header */

nav.header {
  width: 100%;
  min-height: 60px;
  background: linear-gradient(110deg, #212121 60%,#141414 60%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: 'Roboto', sans-serif;
}

.name-nav {
  color: #FCFCFC;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.link-nav {
  justify-content: space-around;
  display: flex;
  width: 30%;
}

.link-nav li {
    list-style: none;
}

.link-nav a {
  color: #FCFCFC;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
}

/* Burger */

.burger div{
  width: 20px;
  height: 2px;
  background-color: #FCFCFC;
  margin: 5px;
}

.burger {
  display: none;
}

/* Responsive */

@media screen and (max-width: 1024px) {
  .link-nav {
    width: 50%;
  }
}

/* Pour Mobile */

@media screen and (max-width: 768px) {

  .name-nav {
    position: absolute;
    left: 3%;
  }

  body {
    overflow-x: hidden;
  }

  .link-nav {
    position: absolute;
    top: 60px;
    height: 91vh;
    right: 0px;
    background-color: #212121;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    transform: translatex(100%);
    transition: transform 0.5s ease-in;
  }

  .activate-nav {
    transform: translatex(0%);
  }

  .burger {
    display: block;
    position: absolute;
    right: 3%;
    top: 3%;
    cursor: pointer;
  }
}



const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.link-nav');

  burger.addEventListener('click', () => {
    nav.classList.toggle('activate-nav');
  });
}

navSlide();
Jean-Pierre-Bruneau a écrit :
je ne comprends pas, sur mon portable tout est parfait Smiley decu


Ah bon ? sur le mien je peux toujours scroll c'est un galaxy A50
SI c'est réglé tout est pour le mieux.
Mais pour d'autres qui se poseraient cette même question (et vu que tu n'as pas donné ta solution), il y a une propriété CSS faite pour ça : autoriser le scroll sur un smartphone (ça marche aussi pour autoriser le zoom par pincement) : touch-action.

En ajoutant ce code, on empêche le défilement, tout en autorisant le zoom si nécessaire.

body {touch-action : pinch-zoom;}
Sujet clos
Aller à