短短几行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的新增选择器来实现的.先看效果截图 实现思路 ...
随机推荐
- props简单小栗子
props简单小栗子 可以直接copy查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 什么是SG？+SG模板
先,定义一下 状态Position P 先手必败 N x先手必胜 操作方法: 反向转移 相同状态 不同位置 的一对 相当于无 对于ICG游戏,我们可以将游戏中每一个可能发生的局面表示为一个点.并且若存 ...
- Java中只有按值传递，没有按引用传递！（两种参数情况下都是值传递）
今天,我在一本面试书上看到了关于java的一个参数传递的问题: 写道 java中对象作为参数传递给一个方法,到底是值传递,还是引用传递? 我毫无疑问的回答:“引用传递!”,并且还觉得自己对java的这 ...
- LeetCode 260 Single Number III 数组中除了两个数外，其他的数都出现了两次，找出这两个只出现一次的数
Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...
- Unity WWW下载图片并保存到Unity的Assets下
1.新建一个UGUI的Image. 2.新建一个脚本wwwTest.cs: using System.Collections; using System.Collections.Generic; us ...
- (转)linux正则表达式详解
linux正则表达式详解 http://blog.csdn.net/wuliowen/article/details/64131815 1:什么是正则表达式: 简单的说,正则表达式就是处理字符串的方法 ...
- 《从0到1学习Flink》—— Flink Data transformation(转换)
前言 在第一篇介绍 Flink 的文章 <<从0到1学习Flink>-- Apache Flink 介绍> 中就说过 Flink 程序的结构 Flink 应用程序结构就是如上图 ...
- 工作经验（Unity篇）
我的工作是C++开发,主要是做底层,其中绝大部分是给Unity调用的,以下是我的脚印,希望不会重蹈覆辙 Unity具有强大的跨平台性,但是使用到库文件不尽相同,例如Android中就使用so库文件,W ...
- Mysql 如何设置字段自动获取当前时间，附带添加字段和修改字段的例子
--添加CreateTime 设置默认时间 CURRENT_TIMESTAMP ALTER TABLE `table_name`ADD COLUMN `CreateTime` datetime N ...
- UiPath Studio 快捷键
掌握快捷键可以事半功倍,写一下比较重要的 1. Ctrl + J 插入代码片段 2. Ctrl + K 快速建变量 3. Ctrl + L 打开日志文件夹 4. Ctrl + F4 关闭当前机 ...