13.（高级）CSS用户体验之：滚动提示

最新推荐文章于 2024-12-07 17:28:35 发布

majun0007

最新推荐文章于 2024-12-07 17:28:35 发布

阅读量919

点赞数

分类专栏：个人作品汇总（CSS高级篇）CSS看书总结及特效文章标签： CSS CSS3 用户体验 html

本文链接：https://blog.youkuaiyun.com/majun0007/article/details/55210331

版权

个人作品汇总同时被 2 个专栏收录

14 篇文章

订阅专栏

（CSS高级篇）CSS看书总结及特效

12 篇文章

订阅专栏

本文介绍了一种利用CSS实现滚动条顶部和底部提示效果的方法，通过巧妙地运用背景渐变和定位来达到目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法：

ul{
    overflow: auto;
    width: 10em;
    height: 8em;
    padding: .3em .5em;
    border: 1px solid silver;

/*用于挡住顶部滚动提示，并使用background-attachment: local，固定在顶部*/
background: linear-gradient(white 30%,transparent),

/*使用background-attachment: scroll，当滚动至挡住区域的transparent，显示滚动提示*/
radial-gradient(at 50% 0,rgba(0,0,0,.4),transparent),

/*用于挡住底部滚动提示，并使用background-attachment: local，固定在底部*/
    linear-gradient(to top,white 30%,transparent) bottom ,
    radial-gradient(at 50% 100%,rgba(0,0,0,.4),transparent) bottom ;
    background-repeat: no-repeat;
    background-size: 100% 50px,100% 15px;
    background-attachment: local,scroll;
}

说明