如何实现使用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代码实现滚动条效果的更多相关文章

  1. 前端每日实战：26# 视频演示如何用不到 50 行 CSS 代码，创作按钮被从纸上掀起的立体效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/KRbXGe 可交互视频教程 此视频 ...

  2. 18 行 JS 代码编一个倒时器

    有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...

  3. Google HTML/CSS代码风格指南(中文版)

    原文链接:http://wncbl.cn/posts/c8e10815/ 看一下没什么印象,那就写一遍吧. 背景 本文档定义了HTML/CSS的编写格式和风格规则.它旨在提高合作和代码质量,并使其支持 ...

  4. css实现视差滚动效果

    今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...

  5. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  6. CSS实现导航栏底部动态滚动条效果

    预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...

  7. div 显示滚动条的CSS代码

    div 显示滚动条的CSS代码   div显示上下左右滚动条 <div style="width:260px;height:120px; overflow:scroll; border ...

  8. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  9. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

随机推荐

  1. Uva12174

    #include <bits/stdc++.h> using namespace std; ; int t; int s,n; ]; ]; ]; void init(){ memset(a ...

  2. onbeforeunload与onunload事件

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定.区别在于o ...

  3. python学习二(文件与异常)

    Python中使用open BIF与文件交互,与for语句结合使用,一次读取一行 读取文件sketch.txt,文件内容如下: Man: Ah! (taking out his wallet and ...

  4. easyui datagrid关于分页的问题

    easyui框架中datagrid可以很好的来展示大量的列表数组,但是由于datagrid一般都是从控件本身传递一个页码给后台,后台进行处理. 但是,最近项目跟webgis有关,数据查询直接是从服务中 ...

  5. 经典SQL语句集锦(收藏版)

    文章来源:http://www.cnblogs.com/herbert/archive/2010/07/02/1770062.html SQL分类: DDL—数据定义语言(CREATE,ALTER,D ...

  6. Oracle 用户相关

    1.查询所有未修改过密码的Oracle用户 SELECT * FROM dba_users_with_defpwd d, dba_users du WHERE du.account_status = ...

  7. 移动端真机调试工具--DebugGap （VIDE）

    越来越多的移动端开发工作,需要我们有一个好的调试工具,以解决各类真机才会遇到的BUG,最近使用了一款DebugGap 的工具,非常方便,在这里推荐给大家. 官网地址 DebugGap  . 按需求下载 ...

  8. sass相关随笔

    安装 下载ruby并且安装 点击这里 打开命令行输入 gem install sass 我使用的是sublime text3 还需要下载三个插件 sass -- 可以帮助你语法高亮 sass buil ...

  9. 【MFC】获取文件大小的方法

    [转载]原文地址:http://blog.csdn.net/coderwu/article/details/5652056 MFC 下可以通过 CFileStatus 获取文件大小. ULONGLON ...

  10. 域名与IP地址的联系与区别

    我们也知道每一台机都有一个唯一ip地址, 特别难记,所以出现了今天的DNS(域名) 当我们的计算机想要和一个远程机器连接时,我们可以申请连接该机器ip地址下的DNS,例如:www.baidu.com. ...