如何实现使用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. git教程1-gitlab部署

    https://about.gitlab.com/install/#centos-7 https://mirror.tuna.tsinghua.edu.cn/help/gitlab-ce/ gitla ...

  2. iconfont的应用

    http://www.iconfont.cn/help/platform.html http://www.iconfont.cn/users/project 点击下载之后: 打开demo.html: ...

  3. 求最短路径(Bellman-Ford算法与Dijkstra算法)

    前言 Dijkstra算法是处理单源最短路径的有效算法,但它局限于边的权值非负的情况,若图中出现权值为负的边,Dijkstra算法就会失效,求出的最短路径就可能是错的.这时候,就需要使用其他的算法来求 ...

  4. jacoco-maven-plugin

    <properties> <org.eclipse.persistence.version>2.7.0</org.eclipse.persistence.version& ...

  5. 【ACM】孪生素数问题

    孪生素数问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 写一个程序,找出给出素数范围内的所有孪生素数的组数.一般来说,孪生素数就是指两个素数距离为2,近的不能再 ...

  6. Shell变量赋值语句不能有空格

    a = 1是错的!!!!!只有 a=1才是正确的.

  7. B - Average Gym - 101161B 组合数学

    http://codeforces.com/gym/101161/attachments 今天被卡常了,其实是自己对组合数技巧研究的不够. 如果是n, m <= 1e5的,然后取模是质数,那么可 ...

  8. 【Java】Java与数字证书

    Java与数字证书 Java与数字证书 证书的签发和应用 证书的内容和意义 其它 证书(Certificate,也称public-key certificate)是用某种签名算法对某些内容(比如公钥) ...

  9. JDK动态代理详解-依赖接口

    0. 原理分析 a). 自定义实现InvocationHandler类,实现代理类执行时的invoke方法 b). 使用Proxy.newProxyInstance生成接口的代理类(入参还包括Invo ...

  10. MongoDB Linux 安装配置 后台运行

    介绍安装的文档很多,可以参考这篇: http://www.mkyong.com/mongodb/how-to-install-mongodb-on-mac-os-x/ 安装完后你可能会碰到的2个问题. ...