滚动阴影解决方案

发布时间 2023-12-20 09:54:16作者: everseven

1. backgroud,限制高度,加overflowcodeopen,

  .g-scroll {
    top: -1px;
    position: relative;
    height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
    background:
        linear-gradient(#fff, transparent) top / 100% 100px,
        radial-gradient(at 50% -15px, rgba(0, 0, 0, .8), transparent 70%) top / 100000% 12px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}
// 限制内容高度
    <div class="form-content g-scroll ">

 

2. shadow标签,计算宽度,没有限制 不是全屏,需要计算宽度, dom结构,header->shadow->main

header{
  position: sticky;
  background: #fff;
  top: 0;
  font-size: 20px;
  padding: 10px;
  z-index: 1;
}
shadow::before{
  content: '';
  box-shadow: 0 0 10px 1px #333;
  position: fixed;
  width: 100%;
}
shadow::after{
  content: '';
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #fff 50% , transparent);
  position: absolute;
}