短短几行css代码实现滚动条效果
如何实现使用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:;
bottom:;
right:;
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
短短几行css代码实现滚动条效果的更多相关文章
- 前端每日实战：26# 视频演示如何用不到 50 行 CSS 代码，创作按钮被从纸上掀起的立体效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/KRbXGe 可交互视频教程 此视频 ...
- 18 行 JS 代码编一个倒时器
有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...
- Google HTML/CSS代码风格指南(中文版)
原文链接:http://wncbl.cn/posts/c8e10815/ 看一下没什么印象,那就写一遍吧. 背景 本文档定义了HTML/CSS的编写格式和风格规则.它旨在提高合作和代码质量,并使其支持 ...
- css实现视差滚动效果
今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...
- 不可思议的纯 CSS 滚动进度条效果
结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...
- CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...
- div 显示滚动条的CSS代码
div 显示滚动条的CSS代码 div显示上下左右滚动条 <div style="width:260px;height:120px; overflow:scroll; border ...
- 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- [刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...
随机推荐
- centos7.3下配置本地yum仓库
部署openstack时,网络yum源安装慢,而且经常中的提示找不到mirrors,所以配置一个本地的安装源很有必要,来解决这个揪心的问题. 安装:yum install yum-utils crea ...
- 装饰器(Decorator)模式
public interface IDoThings { public void doSomeThing(); } public class DoThings implements IDoThings ...
- springBoot实现socketio
https://github.com/mrniko/netty-socketio-demo https://github.com/mrniko/netty-socketio
- Spring4.x、SpringMVC和DButils整合
tomcat 8.Spring 4.X.JDK1.8 需要jar包: 1)日志组件:log4j # debug < info < warn < error log4j.rootLog ...
- Spring自动注入有关的注解
Spring不但支持自己定义的@Autowired注解,还支持几个由JSR-250规范定义的注解,它们分别是@Resource.@PostConstruct以及@PreDestroy. 1,@Comp ...
- KendoUI 自定义验证：
Html: <label>@LogicNameAttribute.GetLogicName(typeof(Reward).GetProperty("ExtraRewardMone ...
- 'NSInternalInconsistencyException', reason: '-[UIViewController _loadViewFromNibNamed:bundle:] loaded the "XXXView" nib but the view outlet was not set.' 崩溃问题
先说下我遇到这个崩溃问题的原因: 自定义的Viewxib和系统的 View重名,导致崩溃 我的理解是我这里加载YJLoginViewController 的时候,YJLoginViewControll ...
- hibernate课程 初探单表映射2-6 session详解（下）
本节主要内容: 1 介绍了getCurrentSession和opensession的区别 2 demo:通过打印比较两个session是否相同,验证两个session是否是同一session 3 d ...
- Java调用SQL Server的存储过程详解(转)
1使用不带参数的存储过程 使用 JDBC 驱动程序调用不带参数的存储过程时,必须使用 call SQL 转义序列.不带参数的 call 转义序列的语法如下所示: 以下是引用片段:{call proce ...
- Eucalyptus常用查询命令
前言: Elastic Utility Computing Architecture for Linking Your Programs To Useful Systems (Eucalyptus) ...