J'ai donc un div qui contient des lignes de données et nous pouvons toujours ajouter des données.

Cependant, comme j'ai une hauteur maximale et un débordement, je voudrais également ajouter une ombre en bas pour montrer à l'utilisateur qu'il peut faire défiler vers le bas.

Je voudrais ajouter cette ombre "uniquement" lorsque la hauteur du div atteint la hauteur maximale définie dans ma classe.

 .container {
  max-height: 546px;
  overflow: auto;

  @media (min-height: 540px) {
    box-shadow: 0px 8px 4px -3px #313335;
  }
}

Je pensais que cela ajouterait simplement l'ombre de la boîte lorsque la hauteur atteint 540 tant que nous ajoutons des données, mais cela ne semble pas.

Vous ne savez pas ce que j'essaie de réaliser devrait être fait via JQuery ou toujours applicable avec la requête multimédia CSS, mais de manière correcte?

J'ai apprécié.

2
Ziko 25 avril 2020 à 02:06

3 réponses

Meilleure réponse

Non.

Voici est Pourquoi.

Non, les requêtes multimédias ne sont pas conçues pour fonctionner en fonction des éléments d'une page. Ils sont conçus pour fonctionner en fonction des appareils ou des types de supports (d'où leur raison d'être des requêtes de supports). la largeur, la hauteur et les autres fonctions multimédias basées sur les dimensions font toutes référence aux dimensions de la fenêtre d'affichage ou de l'écran du périphérique dans les médias basés sur l'écran. Ils ne peuvent pas être utilisés pour faire référence à un certain élément sur une page.

Si vous devez appliquer des styles en fonction de la taille d'un certain élément div sur votre page, vous devrez utiliser JavaScript pour observer les changements de taille de cet élément div au lieu des requêtes multimédias.

- boltclock

Maintenant, pour votre autre partie de votre question, oui.

Voici un extrait:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>TITLE</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
    #tDiv{
        height: 100vh;
        width:300px;
        background-color: green;
    }
</style>
<script>
$(document).ready(function(){
  $(window).resize(function(){
    var height = $("#tDiv").height();
    if(height >= 500){
        $("#tDiv").css('box-shadow', '10px 10px 5px #888');
    }
    else{
        $("#tDiv").css('box-shadow', '10px 10px 5px transparent');   
    }
  });
});
</script>
</head>
<body>
<div id="tDiv">TEST</div>
</body>
</html>

J'ai ajouté du vert pour définir plus facilement les limites des div à l'écran, mais ... la fonction de redimensionnement de la fenêtre illustre que vous pouvez capturer la hauteur d'une div et effectuer une décision en fonction de la définition des attributs de style dans JQuery.

3
24 avril 2020 à 23:30

Voici une solution CSS uniquement qui repose sur l'utilisation de max(). Pas encore supporté par Firefox mais le sera très prochainement.

#tDiv {
  height: 80vh;
  width: 300px;
  margin:0 50px;
  background-color: green;
  position:relative;
}
#tDiv:before {
 content:"";
 position:absolute;
 z-index:-1;
 top:0;
 left:0;
 right:0;
 bottom:max(0px,calc(500px - 100%));
 box-shadow: 0px 8px 4px -3px #313335;
}
<div id="tDiv">TEST</div>

Une autre idée plus prise en charge en utilisant clip-path:

#tDiv {
  height: 80vh;
  width: 300px;
  margin:0 50px;
  background-color: green;
  position:relative;
}
#tDiv:before {
 content:"";
 position:absolute;
 z-index:-1;
 top:0;
 left:0;
 right:0;
 bottom:0;
 clip-path:polygon(0 0,100% 0,100% calc(200% - 500px),0 calc(200% - 500px));
 box-shadow: 0px 8px 4px -3px #313335;
}
<div id="tDiv">TEST</div>
0
Temani Afif 25 avril 2020 à 00:06

J'ai remarqué votre commentaire sur la réponse d'Equinox:

💬 apprécie vraiment votre réponse! Clarifié beaucoup de choses. Maintenant, je me demande s'il y a quelque chose de spécifique à la réaction au lieu de JQuery. - Ziko il y a 1 heure

Et oui, il existe une méthode plus spécifique à React qui ne nécessite pas JQuery.

Explication du code

En utilisant le crochet d'état React useState(), vous pouvez créer une fonction pour affecter un accessoire cssClass dans votre composant pour basculer sur votre élément #tDiv.

Dans votre HTML, définissez className={cssClass} sur votre élément #tDiv afin que la valeur de prop cssClass soit appliquée en tant que classe sur l'élément.

Enfin, avec le hook d'effet React useEffect(), ajoutez un écouteur d'événements sur window pour appeler une fonction qui ...

  • comparer la taille de votre élément #tDiv
  • si height >= 500px définissez l'accessoire cssClass sur le nom de la classe CSS à appliquer sur l'élément #tDiv
  • sinon, désactivez l'accessoire cssClass pour supprimer la classe CSS qui est appliquée sur l'élément #tDiv

Exemple de code

⚡ CodeSandBox disponible ici: https://codesandbox.io/s/stackoverflow-61418731-k3tz3

C'est le composant:

import React from "react";
import "./styles.css";

export default function App() {
  const [cssClass, setCssClass] = React.useState();

  React.useEffect(() => {
    // triggered function when window is resized
    function handleResize() {
      // target the #tDiv element
      const tDiv = document.querySelector("#tDiv");
      // compare the height
      if (tDiv.clientHeight >= 500) {
        // set `cssClass` prop to toggle on #tDiv
        setCssClass("elevated");
      } else {
        // unset `cssClass` prop to remove "elevated" class on #tDiv
        setCssClass(null);
      }
    }

    // add event listener on window.resize
    window.addEventListener("resize", handleResize);

    // remove event listener when component is destroyed
    return _ => window.removeEventListener("resize", handleResize);
  });

  // `cssClass` will reflect the prop value to toggle CSS class
  return (
    <div id="tDiv" className={cssClass}>
      Resize the height of your browser to see me elevate!
    </div>
  );
}

Et voici le CSS de la classe elevated qui s'applique box-shadow:

.elevated {
  box-shadow: 10px 10px 5px #888;
}
1
j3ff 25 avril 2020 à 01:28