11326 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

j'expérimente ce code: https://codepen.io/bickle66/pen/YbamYq

Sur CodePen, il fonctionne pour ce qu'il est prévu, ouvrir ou refermer des div au fur et à mesure du scroll. Je mets ce code, dans son intégralité, sur une page d'essai (css, html et Javasvcript sur la même page, avec les balises <style> bien sûr), il ne fonctionne plus. Et avec le même navigateur, Firefox 68.7. Je vois sur la partie js du codepen "JS (Babel)". Si j'ai bien suivi les docs, Babel est un transcompiler qui permet de compiler du code js récent en un code reconnu par tous les anciens navigateurs. Normalement, ceci se passe du côté du développeur qui installe le js, pas du côté client. Je n'ai normalement rien à faire d'autre pour exécuter ce code qui, de toute façon, fonctionne sur codepen avec le même navigateur.

Je ne comprends pas, merci de m'éclairer.
Bonjour,

Ca peut être le pble du CSS qui est en SCSS ; la derniere ligne

&.scrolled {
    opacity: 1;
  } 

qui ne fonctionne pas en CSS.

Le code en CSS ca donnerait ca :

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    outline: none;
  }
  
  .outer {
    width: 100%;
    min-height: 100vh;
    background-color: grey;
  }
  
  .booger {
    display: inline-block;
    width: 49%;
    margin: 50px 30px;
    padding: 100px 0;
    background-color: darkgray;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  .booger.scrolled {
    opacity: 1;
  }
Bonjour,

je reste bouche bé. Ça fonctionne effectivement avec ta modification. J'avais bien tenté de faire quelque chose ici dans le css, mais j'avais seulement mis .scrolled et non pas .booger.scrolled. Y-a-t-il une règle pour passer du scss au css comme tu viens de le faire ? Je ne comprends pas la différence.

En tous cas, merci, on hésite toujours à poser des questions un peu basiques, mais finalement on ne le regrette pas.
Meilleure solution