Box-shadow все еще обрезается с видимым параметром overflow-y

У меня та же проблема, что и в этом вопросе, но мне нужно установить overflow-x на scroll, иначе весь документ будет шире экрана. Теоретически установка overflow-y на visible должна сохранять тень блока видимой, но все равно обрезает ее. Это можно увидеть с помощью кода ниже.

*::-webkit-scrollbar {
  display: none;
}
body {
  margin: 0;
  background: #ddd;
  height: 100%;
  width: 100%;
}
.scroll {
  width: 100%;
  height: 60px;
  overflow-x: scroll;
  overflow-y: visible;
  white-space: nowrap;
}
.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px;
  background: #fff;
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1);
}
<div id="container">
  <div class="scroll">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Я хотел бы, чтобы тень была полностью видна за пределами родительского div, возможно ли это вообще?


css overflow box-shadow
person ZomoXYZ    schedule 12.02.2017    source источник
comment
Неа. Вы устанавливаете overflow на что угодно, кроме visible, все остается, включая тени (ночью)...   -  person tao    schedule 12.02.2017

Ответы (3)


arrow_upward
2
arrow_downward

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

введите здесь описание изображения

Простое решение

Установите нижний отступ для контейнера .scroll.

person user2372395    schedule 12.02.2017
comment
Я думал об этом, но из-за настройки этого сайта сделать это будет сложно, я надеялся на другой путь. - person ZomoXYZ; 12.02.2017
comment
Но почему вы используете overflow-x: scroll, если вы его скрываете? - person user2372395; 13.02.2017
comment
В реальном проекте будет больше полей, и они должны быть прокручиваемыми. Если я оставлю его равным visible, то при прокрутке пользователем весь документ будет прокручиваться, а все, что ниже него, будет перемещено. Если я оставлю его на hidden, то другие поля в этой строке также будут скрыты. - person ZomoXYZ; 13.02.2017

arrow_upward
0
arrow_downward

Вы можете добавить отступ к #container, чтобы он всегда отображал тень, НО горизонтальные тени будут обрезаны.

*::-webkit-scrollbar {
  display: none;
}
body {
  margin: 0;
  background: #ddd;
  height: 100%;
  width: 100%;
}
#container {
  max-width: 300px;
  overflow: scroll;
  padding: 100px 0;
}
.scroll {
  width: 100%;
  height: 60px;
  white-space: nowrap;
}
.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px;
  background: #fff;
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, .5);
}
<div id="container">
  <div class="scroll">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

person Letícia Rezende    schedule 12.02.2017

arrow_upward
0
arrow_downward

Вычтите отступ из поля:

#container {
  margin: -100px 0;
}
person Terrel Jones Jr.    schedule 27.07.2019