使用CSS实现一个滚动阴影效果

<!-- 容器 -->
<div class="container">
  	<!-- 阴影 -->
    <div class="shadow"></div>
  	<!-- 占位用，使容器能够滚动 -->
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    7<br/>
    8<br/>
    9<br/>
    10<br/>
    11<br/>
    12<br/>
    13<br/>
    14<br/>
    15<br/>
    16<br/>
</div>

// 给容器设置最大高度，使其产生滚动
.container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid black;
    position: relative;
}
// 利用sticky定位实现吸顶效果
.shadow {
    position: sticky;
    visibility: hidden;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 10px 0 10px rgba(0, 0, 0, 0.2);
  	// 如果不希望阴影挡住下方内容的点击事件的话
    pointer-events: none;
}

import { debounce } from 'https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.min.js';
// 容器
const container = document.querySelector('.container');
// 阴影
const shadow = document.querySelector('.shadow');
// 用到了lodash的防抖函数，
// 通过scrollTop是否大于0来判断容器顶部是否还有滚动空间，
// 从而控制shadow是否显示。
const handler = debounce((e) => {
    if (e.target.scrollTop > 0) {
        shadow.style.visibility = 'visible';
    } else {
        shadow.style.visibility = 'hidden'
    }
}, 50, { leading: true });
// 监听滚动事件
container.addEventListener('scroll', handler);

const scrollRight = scrollWidth - scrollLeft;
const scrollBottom = scrollHeight - scrollTop;
// 然后再使用前文的逻辑处理即可
......
// 但是这里还有个坑，
// 上述的scrollBottom和scrollRight是通过浮点数相减来的，
// 会有精度问题，因此比较时不是直接与0比较，而是用Number.EPSILON
// 举个栗子
scrollRight > Number.EPSILON