短短几行css代码实现滚动条效果

最新推荐文章于 2022-06-22 17:53:51 发布
最新推荐文章于 2022-06-22 17:53:51 发布
阅读量196 收藏
点赞数
原文链接：http://www.cnblogs.com/lrgupup/p/10642595.html
版权

如何实现使用css实现滚动条效果

实现效果，运用线性渐变来实现功能

假设我们的页面被包裹在 <body> 中，可以滚动的是整个 body，给它添加这样一个从左下到到右上角的线性渐变：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}

实现的效果：

运用伪类实现把多出来的部分遮住：

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

实际的效果是：

但是滚动到底部，进度条没有到底部，究其原因，是因为 body 的线性渐变高度设置了整个 body 的大小，我们调整一下渐变的高度：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}

+5px则是滚动进度条的高度，预留出5px的高度：

摘自掘金：https://juejin.im/post/5c35953ce51d45523f04b6d2

转载于:https://www.cnblogs.com/lrgupup/p/10642595.html

weixin_30951231
关注
超好看的滚动条特效适用于各种浏览器
11-07
超好看的滚动条特效适用于各种浏览器
css实现内部滚动
u013018357的博客
07-08 3961
html页面 <div class="container"> <figure class="figcaption"> <img src="/minimg/index5.jpg" class="img-full" /> </figure> <p class="text-p">这是一张测试图片</p> </div>css样式 .container{ max-width: 64re
css 横向滚动条
a5252145的博客
07-06 496
横向滚动条 white-space: nowrap; min-width: 900px; overflow-x: auto; 效果图：
实现行内文字滚动,法一:css3动画,法二:js操作dom
weixin_44134588的博客
01-04 511
需求: 因一行内的文字太多,需要滚动以展示所有的文字; 法一 利用css3中的动画进行展示; 定义动画: .animate { color: #000; white-space: nowrap; animation: 10s wordsLoop linear infinite normal; } @keyframes wordsLoop { 0% { transform: translateX(20%);
css - (左右滑动 时，隐藏底部滚动条)
weixin_30666753的博客
03-19 991
先上效果图，如下： 是不是经常看到此类效果？ 这里如果不借用其它框架，单纯的利用css 来实现怎么做呢？ 1.这一看就要用到overflow，但是用它会有一个默认的滚动条； 2.那么重点来了，怎么解决这个问题呢？ 3.用::-webkit-scrollbar 就可以很好地解决。 代码如下： css * { padding: 0; mar...
HTML5+CSS3基础
nabirt的博客
10-19 1350
记录一下html+css的基础知识
HTML&CSS笔记
我佛很悲
11-20 1084
HTML&CSS笔记 此笔记为李立超老师网课内容
HTML5、CSS、JS基础
qq_49101841的博客
03-03 2376
学习笔记
HTml +CSS3知识点总结：
gz98411的博客
06-17 447
一，html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改...
html+css+jquery----简单博客网页练习
苏灵均的博客
06-22 820
跟着自学网的教程，敲的一个自学网的网页。前面有详细解释，源码在最后部分。
进度条、对话框设计.rar_java 制作 进度条_java 进度条_组合框_组合框 颜色_进度条
09-14
进度条的设计,掌握颜色选择器对话框的使用,文件选择器对话框的使用,使用JOptionPane类创建对话框,通过制作“设置字体”对话框，掌握列表框、单选按钮、组合框等组件的使用,了解打包工具JAR的使用
ios-仿“爱彼迎”广告滚动效果.zip
07-11
项目需求仿照爱彼迎广告展示需要带进度条的滚动。爱彼迎在上边添加了播放器，本项目使用collection实现的图片的逻辑，需要播放器的可自行修改demo，根据数据判断什么时候调用播放器控件，写的不完整的地方欢迎大家指正，仿“爱彼迎”广告滚动效果。
Css实现内容溢出添加横向滚动条
hy3528的博客
05-25 1197
效果图 在这里每一个div标签包裹着一张图片和一行文字 以下代码直接copy看效果 <div class="banner"> <div class="one"> <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片"> <p
几行代码轻松解决滚动条样式问题，堪称神器
weixin_30340617的博客
10-13 181
相信很多同仁都曾为各种浏览器的滚动条样式困惑过，而且不同的浏览器默认的滚动条样式还不一致。网上也有很多说法修改滚动条样式，但是大多数都是滥竽充数。今天我只说干货，纯干货，干货来自于我的一位同事的推荐，在此，感谢同事，谢谢。 第一步：你需要在样式<style></style>标签中插入如下代码 1 /* 设置滚动条的样式 */ 2 3 ...
不可思议的纯 CSS 滚动进度条效果
weixin_34277853的博客
01-09 510
问题先行，如何使用 CSS 实现下述滚动条效果？ 就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用...
jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
mituan1234567的专栏
07-23 1198
http://www.jb51.net/article/23526.htm     xmlns="http://www.w3.org/1999/xhtml">     http-equiv="Content-Type" c />   无标题文档   type="text/css">
Progressbar、SeekBar进度条,滚动条
limiaoaichendihai的博客
12-23 514
在我们开发视频项目时，通常播放视频时有 进度条和加载时的滚动条，我们则需要自己自定义这种功能。 通常我们都是通过xml的格式进行改写的 progress_layer_list.xml             android:id="@android:id/background"         android:drawable="@drawable/
MFC基于对话框编程实例：使用“未定义进度”的进度条（有一节小进度在进度条中滚动）
szx0427的博客
10-02 609
效果展示------- （由于gif的录制问题，进度显示不连贯，实际上效果很不错的） 程序实例------- 1、打开Visual Studio（此文以VS2010做例子），新建一个基于对话框的MFC程序，命名为Progress。 2、向对话框中拖入一个Progress控件、一个Check Box，调整好控件和对话框的大小。 3、设置ID：进度条IDC_PROGRESS、复选框I...
SwiftUI动画利用视觉魔术巧妙实现无限滚动进度条
享受开发，颠倒银河
04-05 3585
为了表示任务的进度状态，我们可以在SwiftUI中使用ProgressView。 不过ProgressView只在SwiftUI 2.0(iOS 14.0+)中可用，而且无法表示无限滚动状态。 那么，我们能不能在SwiftUI中实现一款无限滚动的进度条呢? 在本篇博文中，您将学到以下内容： - SwiftUI动画实现无限滚动进度条 - 进一步实现“首尾相连”的无限滚动 - 使用复合动画进一步提升视觉效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值