如何实现使用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. RabbitMQ基础概念及使用

    RabbitMQ RabbitMQ是什么? RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议.MQ全称为Message Q ...

  2. springBoot实现socketio

    https://github.com/mrniko/netty-socketio-demo https://github.com/mrniko/netty-socketio

  3. Chapter10

    package scala import java.io.{PrintStream, PrintWriter}import java.util.Date import scala.util.loggi ...

  4. postgresql删除还有活动连接的数据库

    select pg_terminate_backend(pid) from pg_stat_activity where datname='testdb' and pid<>pg_back ...

  5. 宋宝华：swappiness=0究竟意味着什么？

    http://mp.weixin.qq.com/s/BixMISiPz3sR9FDNfVSJ6w 本文解释swappiness的作用,以及swappiness=0究竟意味着什么. 内存回收 我们都知道 ...

  6. Java文件与io——字节流

    FileOutputStream用于写入诸如图像数据之类的原始字节的流 字节输出流:OutputStream 此抽象类表示输出字节流的所有类的超类.(写) 字节输入流:InputStream(读) p ...

  7. string去空格方法

    String str = " asd "; String ntr = ("A" + str).trim().substring(1);//将头部加一个字符再用t ...

  8. 一个简单的CI分页类

    [php] view plaincopy <span style="font-size:16px;">/** * * 关于 页码有效性的判断需要加在 控制器中判断,即当 ...

  9. Git常用操作命令收集

      Git常用操作命令收集 1.进入本地仓库访问位置之后执行命令 1) 远程仓库相关命令 检出仓库:$ git clone git://github.com/jquery/jquery.git 查看远 ...

  10. Device

    #import "AppDelegate.h" #import "RootViewController.h" @implementation AppDelega ...