1. backgroud,限制高度,加overflow,codeopen,
.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; }
标签:滚动,解决方案,top,阴影,background,fff,position,shadow,overflow From: https://www.cnblogs.com/everseventh/p/17914452.html