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

最新推荐文章于 2025-12-16 08:18:08 发布

原创

最新推荐文章于 2025-12-16 08:18:08 发布 · 564 阅读

收录于

当前文章被以下社区和专栏收录：

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

炫酷渐变进度条效果滚动条制作
页面起始，将原来浏览器自带的滚动条宽度设为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;
        }