如何实现CSS滚动容器底部固定的滚动提示渐变效果？

之前的渐变为什么会跟着内容移动 #

你之前的实现有两个硬伤：

• 给.kwrapper写的:before规则没加伪元素必需的content属性，浏览器根本不会渲染这个渐变层
• 就算补上content，没有设置脱离文档流的定位属性，伪元素会跟着内容流一起滚动，完全固定不住位置

具体实现步骤 #

1. 给滚动容器加定位参考 #

在原有.kwrapper的CSS规则里补充相对定位属性，让后续的渐变层可以精准对齐滚动容器的可视边界，而不是整个页面：

.kwrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 500px;
    overflow-y: auto;
    /* 新增属性：作为内部绝对定位元素的参考边界 */
    position: relative;
}

2. 写永久固定在可视区的底部渐变层 #

用绝对定位的伪元素实现渐变效果，完全脱离滚动内容流，不管内容怎么滚动，渐变始终停在容器可视区的底部，和参考的日历底部提示效果一致：

.kwrapper::after {
    /* 必需属性：不写这个伪元素不会渲染 */
    content: '';
    /* 绝对定位，相对于外层.kwrapper计算位置 */
    position: absolute;
    /* 严格对齐容器可视区的底部，左右方向完全撑满 */
    bottom: 0;
    left: 0;
    right: 0;
    /* 渐变高度设为80px，轻薄不突兀，和常见日历的提示效果匹配 */
    height: 80px;
    /* 从上到下从全透明渐变到纯白色，和容器背景统一 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
    /* 关键属性：让渐变层不拦截鼠标点击，不会挡住下面的按钮、日历组件的交互 */
    pointer-events: none;
    /* 提高层级，保证渐变显示在第三方日历组件的上层 */
    z-index: 10;
    /* 加平滑过渡，方便后续做自动隐藏效果 */
    transition: opacity 0.3s ease;
}

细节提醒：把原来打算用的::before换成::after，可以避免伪元素被第三方日历的内置层级遮挡，让渐变稳定显示在最上层。

3. （可选优化）滚动到底部时自动隐藏渐变 #

做体验优化：当用户已经滚动到容器最底部，没有更多内容可看的时候，自动把渐变提示隐藏，避免无意义的遮挡。
先给滚动容器加个滚动监听：

const scrollContainer = document.querySelector('.kwrapper');
scrollContainer.addEventListener('scroll', () => {
    // 判定是否滚动到容器最底部
    const reachedBottom = scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight - 1;
    // 到底就切换类名，控制渐变的显示状态
    scrollContainer.classList.toggle('is-bottom', reachedBottom);
})

再加对应的CSS规则：

.kwrapper.is-bottom::after {
    opacity: 0;
}

内容的提问来源于stack exchange，提问作者Sigurd Mazanti