当容器可滚动时，侧框阴影被切断

时间：2021-01-13 10:00:07

标签： javascript html css

我有一张卡片列表，其中每张卡片都是一个 div 并且有一个 box-shadow。 Cards 容器是一个可滚动的 div。我不知道如何实现在左侧和右侧保持阴影，请查看屏幕截图。卡片容器 .content 需要与页脚内容 .footer 对齐。

enter image description here

.page{
  display: flex;
  flex-direction: column;
  width: 600px;
  background: white;
  padding: 100px;
}

.content {
  overflow: auto;
  display: flex;
  background: white;
  padding-top: 50px;
  padding-bottom: 50px;
  /* padding-left: 50px;
  padding-right: 50px;
  margin-left: -50px;
  margin-right: -50px; */
}

.content > * + * {
  margin-left: 20px;
}

.card{
  overflow: visible;
  padding: 0 50px;
  width: 220px;
  background: #dde2eb;
  box-shadow: 0 15px 25px rgba(33, 49, 74, 0.25);
}

.footer{
  background: yellow;
}
<div class="page">
  <div class="content">
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
  </div>
  <div class="footer">
    Footer placeholder
  </div>
</div>

3 个答案:

答案 0 :(得分：1)

      .page{
  display: flex;
  flex-direction: column;
  width: 600px;
  background: white;
  padding: 100px;
}

.content {
  overflow: auto;
  display: flex;
  background: white;
  padding-top: 50px;
  padding-bottom: 50px;
  /* padding-left: 50px;
  padding-right: 50px;
  margin-left: -50px;
  margin-right: -50px; */
}
.card {
  padding: 0 10px;
}
.card-inner{
  overflow: visible;
  padding: 0 50px;
  width: 220px;
  background: #dde2eb;
  box-shadow: 0 15px 25px rgba(33, 49, 74, 0.25);
}

.footer{
  background: yellow;
padding: 0 10px;
}
<div class="page">
    <div class="content">
        <div class="card">
            <div class="card-inner">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
            </div>
        </div>
        <div class="card">
            <div class="card-inner">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
            </div>
        </div>
        <div class="card">
            <div class="card-inner">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
            </div>
        </div>
        <div class="card">
            <div class="card-inner">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
            </div>
        </div>
    </div>
    <div class="footer">
      Footer placeholder
    </div>
  </div>

答案 1 :(得分：1)

更新您的代码，如下所示：

.page{
  max-width: 600px;
  background: white;
  padding: 50px;
}

.content {
  overflow: auto;
  display: flex;
  background: white;
  padding: 50px 0;
}
/* added */
.content::before,
.content::after {
  content:"";
  min-width:30px;
}
/**/
.content > * + * {
  margin-left: 20px;
}

.card{
  padding: 0 50px;
  width: 220px;
  background: #dde2eb;
  box-shadow: 0 15px 25px rgba(33, 49, 74, 0.25);
}

.footer{
  background: yellow;
  margin:0 30px; /* added */
}
<div class="page">
  <div class="content">
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
  </div>
  <div class="footer">
    Footer placeholder
  </div>
</div>

如果你调整滚动条会更好看（仅在 webkit 浏览器上可用）

.page{
  max-width: 600px;
  background: white;
  padding: 50px;
}

.content {
  overflow: auto;
  display: flex;
  background: white;
  padding: 50px 0;
}
/* added */
.content::before,
.content::after {
  content:"";
  min-width:30px;
}
/**/
.content > * + * {
  margin-left: 20px;
}

.card{
  padding: 0 50px;
  width: 220px;
  background: #dde2eb;
  box-shadow: 0 15px 25px rgba(33, 49, 74, 0.25);
}

.footer{
  background: yellow;
  margin:0 30px; /* added */
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background:linear-gradient(to right,transparent 30px,grey 0 calc(100% - 30px), transparent 0);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}
<div class="page">
  <div class="content">
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
  </div>
  <div class="footer">
    Footer placeholder
  </div>
</div>

答案 2 :(得分：0)

您可以通过简单地向容器添加填充来实现它。

.page{
  display: flex;
  flex-direction: column;
  width: 600px;
  background: white;
  padding: 100px;
}

.content {
  overflow: auto;
  display: flex;
  background: white;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
  /* padding-left: 50px;
  padding-right: 50px;
  margin-left: -50px;
  margin-right: -50px; */
}

.content > * + * {
  margin-left: 20px;
}

.card{
  overflow: visible;
  padding: 0 50px;
  width: 220px;
  background: #dde2eb;
  box-shadow: 0 15px 25px rgba(33, 49, 74, 0.25);
}

.footer{
  background: yellow;
}
<div class="page">
  <div class="content">
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
    <div class="card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui justo, luctus quis elit in, lobortis vestibulum metus. Quisque pellentesque volutpat nisi in mattis.
    </div>
  </div>
  <div class="footer">
    Footer placeholder
  </div>
</div>

相关问题
最新问题