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

发布时间：2023-12-12 10:52:07 作者：超级无敌大怪兽

为了良好的用户体验，需要在容器顶部可滚动的情况下增加一个阴影条，提示用户可向上滚动，本文主要为大家详细介绍了如何使用CSS实现简单的滚动阴影效果，有需要的小伙伴可以了解下

背景

为了良好的用户体验，需要在容器顶部可滚动的情况下增加一个阴影条，提示用户可向上滚动；如果容器顶部不可滚动，则不显示阴影条，效果如下图所示：

实现

首先我们定义好dom和相应的样式：

<!-- 容器 -->
<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;
}

核心的实现便是如何判断容器顶部是否还有滚动空间，我们用到scrollTop属性，如果scrollTop大于0，说明可以向上滚动：

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);

然后就实现了开头的滚动阴影效果。

举一反三

会了顶部阴影，那怎么实现底部、左侧、右侧阴影呢？聪明的你肯定脱口而出用scrollBottom、scrollLeft、scrollRight比较一下就行了。行吗？不太行哦，元素没有scrollBottom、

scrollRight属性，因此底部和右侧阴影不能用这个方法实现。那么应该怎么搞呢，也简单，用到元素的scrollWidth和scrollHeight就可以实现scrollBottom和scrollRight的效果：

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

其实不止滚动阴影，还有一些效果也是可以用这个思路做的，比如下图中的指示器效果：

总结

写篇小水文，混混经验。我发现长篇的干货数据不太好，反而是这样几分钟看完的小水文数据还挺好看的。虽然水，但是也有不少知识点：

sticky定位实现吸顶效果
pointer-events实现鼠标事件穿透
判断元素某个方向是否可滚动
防抖函数以及立即执行
浮点数精度用EPSILON处理

到此这篇关于使用CSS实现一个滚动阴影效果的文章就介绍到这了,更多相关CSS滚动阴影内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！

Tag：css 滚动阴影

使用纯 CSS 实现滚动阴影效果
这篇文章主要介绍了使用纯 CSS 实现滚动阴影效果,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-04
css实现元素四周阴影的示例代码
CSS的阴影效果为网页设计增添了许多细节和质感,本文就来介绍一下css实现元素四周阴影的示例代码，具有一定的参考价值，感兴趣的可以了解一下
2023-12-04
使用CSS实现Logo阴影特效
这篇文章主要个大家介绍了如何使用CSS实现Logo阴影特效，文章通过代码示例给大家介绍的非常详细，对大家的学习或工作有一定的帮助，感兴趣的同学可是自己动手尝试一下
2023-11-20
CSS 实现多彩、智能的阴影效果
这篇文章主要介绍了CSS 实现多彩、智能的阴影效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-05-12
css文字阴影渐渐模糊效果的实现
这篇文章主要介绍了css文字阴影渐渐模糊效果的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-12-07
CSS 阴影动画优化技巧
这篇文章主要介绍了CSS 阴影动画优化技巧,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-10-31
用CSS画一个带阴影的三角形的示例代码
这篇文章主要介绍了用CSS画一个带阴影的三角形的示例代码的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随
2019-07-31
css实现动态阴影、蚀刻文本、渐变文本效果
这篇文章主要介绍了css实现动态阴影、蚀刻文本、渐变文本效果，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-22
CSS 翘边阴影的实现代码
这篇文章主要介绍了CSS 翘边阴影的实现代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-15