CSS медиа-запрос, как я могу добавить тень под div, если ее высота превышает 500px? - PullRequest
Новая
       3

CSS медиа-запрос, как я могу добавить тень под div, если ее высота превышает 500px?

2 голосов
/ 25 апреля 2020

Итак, у меня есть div, который содержит строки данных, и мы все еще можем добавлять данные.

Однако, так как у меня максимальная высота и переполнение, я хотел бы также добавить тень внизу чтобы показать пользователю, что он может прокрутить вниз.

Я бы хотел добавить эту тень «только», когда высота div достигает максимальной высоты, определенной в моем классе. 

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

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

Я думал, что это просто добавит тень от поля, когда высота достигнет 540, пока мы добавляем данные, но, кажется, нет.

Не уверен, что то, чего я пытаюсь достичь, должно быть сделано через JQuery или все еще применимо с css медиа-запросом, но правильным способом?

Оценено.

Ответы [ 3 ]

2 голосов
/ 25 апреля 2020

Нет.

Здесь почему.

Нет, медиазапросы не предназначены для работы на основе элементов на странице. Они предназначены для работы на основе устройств или типов носителей (поэтому их называют медиазапросами). width, height и другие мультимедийные функции, основанные на измерениях, все ссылаются на размеры либо области просмотра, либо экрана устройства в мультимедийных данных на экране. Их нельзя использовать для ссылки на определенный элемент на странице.

Если вам нужно применять стили в зависимости от размера определенного элемента div на вашей странице, вам придется использовать JavaScript для наблюдения изменения в размере этого элемента div вместо медиазапросов.

- boltclock

Теперь для другой части вашего вопроса, да.

Вот фрагмент: 

<!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>

Я добавил зеленый, чтобы упростить определение границ div на экране, но ... функция изменения размера окна показывает, что вы можете захватывать Высота div и выполнить решение на его основе, установив атрибуты стиля в JQuery.

1 голос
/ 25 апреля 2020

Я заметил ваш комментарий к ответу Equinox:

? искренне признателен за ваш ответ! Разъяснил много вещей. Теперь задается вопросом, есть ли что-то реагирующее, задав c вместо JQuery. - Ziko 1 час a go

И да, есть более конкретный React c способ, который не требует JQuery.

Объяснение кода

Используя обработчик состояния React useState(), вы можете создать функцию для назначения cssClass пропеллера в вашем компоненте для переключения на элемент #tDiv.

В вашем HTML наборе className={cssClass} на вашем Элемент #tDiv, так что значение cssClass prop применяется как класс к элементу.

Наконец, с помощью ловушки эффекта React useEffect() добавьте прослушиватель событий в window для вызова функции, которая будет ...

  • сравнить размер вашего #tDiv элемента
  • , если height >= 500px установить cssClass реквизит для имени класса CSS, к которому будет применяться элемент #tDiv
  • , если не отменен, пропеллер cssClass для удаления класса CSS, применяемого к элементу #tDiv

Пример кода

⚡ CodeSandBox доступен здесь: https://codesandbox.io/s/stackoverflow-61418731-k3tz3

Это компонент: 

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>
  );
}

И это CSS для elevated класс, который применяется box-shadow: 

.elevated {
  box-shadow: 10px 10px 5px #888;
}
0 голосов
/ 25 апреля 2020

Вот единственное решение CSS, которое использует max(). Все еще не поддерживается с Firefox, но будет очень скоро. 

#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>

Еще одна идея, более поддерживаемая использованием пути-клипа: 

#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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...