JS练习三：炫酷渐变进度条效果滚动条（不兼容火狐浏览器）

wind皮皮

于 2020-05-14 01:23:44 发布

阅读量487

点赞数 1

文章标签： js css html

本文链接：https://blog.csdn.net/langyixuan/article/details/106111026

版权

本文介绍如何利用JavaScript、CSS和HTML制作一款不兼容Firefox的炫酷渐变进度条效果滚动条。首先通过CSS隐藏默认滚动条，然后在滚动时动态显示具有渐变效果的滚动条，并且滚动条高度会根据页面浏览进度而改变。

摘要由CSDN通过智能技术生成

炫酷渐变进度条效果滚动条制作
页面起始，将原来浏览器自带的滚动条宽度设为0不显示
在这里插入图片描述滚动滚动条，显示动态渐变滚动条效果
滚动条高度随着页面浏览的进度变化
代码：
css+html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动条特效</title>
       <style>
        * {
   
            padding: 0;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        body {
   
            background-color: #000;
        }
        
        ::-webkit-scrollbar {
   
            width: 0;

最低0.47元/天解锁文章

wind皮皮

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS练习三：炫酷渐变进度条效果滚动条（不兼容火狐浏览器）

炫酷渐变进度条效果滚动条制作页面起始，将原来浏览器自带的滚动条宽度设为0不显示滚动滚动条，显示动态渐变滚动条效果滚动条高度随着页面浏览的进度变化代码：css+html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
复制链接

扫一扫