2
votes

La barre de défilement est là mais la page ne défile pas

Actuellement, je travaille sur un site Web pour ma petite amie, et le problème que j'ai est que j'ai une barre de défilement sur la page, mais même si le contenu déborde en dehors de la page, cela ne me permet pas de faites défiler la page vers le haut et vers le bas. Si cela peut vous aider, j'utilise l'IDE Brackets pour ce projet.

 body {

      background-color: rgb(66, 197, 244);
      overflow-y: scroll;
      overflow-x: hidden;
}

Voici le code CSS que j'ai pour ma balise body. Y a-t-il quelque chose qui me manque ou quelque chose que je dois ajouter?

html css

2 commentaires

Pensez-vous pouvoir reproduire le problème dans un extrait de code ( exemple reproductible minimal ) dans la question elle-même? (Utilisez le bouton <> dans l'éditeur). Idéalement, il devrait contenir juste assez de code pour reproduire le problème et pas plus.

Je n'arrive pas à le reproduire avec ce que vous avez publié. Que se passe-t-il lorsque vous essayez de faire défiler? De plus, à quoi ressemble le contenu de la page?

3 Réponses :

0
votes

Lorsque vous définissez le overflow-y: scroll; , il affichera toujours la barre de défilement même s'il n'y a pas de contenu à faire défiler.

Consultez ce lien pour plus d'informations https: //developer.mozilla .org / fr-FR / docs / Web / CSS / overflow

Il vous suffit d'ajouter plus de contenu à votre page ou de réduire la taille verticale de votre fenêtre.

<div class="blue half">
  <p>No Content</p>
</div>
<div class="red half">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  overflow: hidden;
}
div {
  height: 100vh;
  overflow-y: scroll;
}
.blue {
  border: 1px solid blue;
  background: lightblue;
}
.red {
  border: 1px solid red;
  background: tomato;
}

0 commentaires

1
votes

Bienvenue dans StackOverflow. Non, tu vas bien. Il n'y a peut-être pas assez de contenu pour faire défiler.

<div>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>

</div>

body {
  background-color: rgb(66, 197, 244);
  overflow-y: scroll;
  overflow-x: hidden;
}

0 commentaires

1
votes

Si vous dites que le contenu déborde, il manque probablement la propriété overflow sur la balise html (ou un autre wrapper qui pourrait avoir des dimensions et contenir votre contenu). Et, comme la plupart des gens l'ont déjà dit, si vous utilisez une valeur de défilement sur la propriété de débordement, elle vous montrera toujours la barre de défilement même si vous n'avez aucun contenu créant un débordement. Pour avoir une barre de défilement seulement quand c'est vraiment nécessaire, vous devez remplacer "scroll" par "auto".

0 commentaires