zoukankan      html  css  js  c++  java
  • 纯css实现顶部进度条随滚动条滚动

    <!DOCTYPE html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title></title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style type="text/css">
        body{
          overflow-y: scroll;
          overflow-x: hidden;
          background: linear-gradient(to right top, deepskyblue 50%, #eee 50%) no-repeat;
          background-size: 100% calc(100% - 100vh + 3px);
          white-space:normal;
          word-break:break-all;
          word-wrap:break-word;
        }
        body::after{
          content: '';
          position: fixed;
          top: 3px;
          left: 0; right: 0; bottom: 0;
          background: #fff;
          z-index: -1;
        }
      </style>
    </head>
    <body>
    sdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfassdfsdklfjsdlfas
    </body>
    </html>
     
    摘自掘金:https://juejin.im/post/5c35953ce51d45523f04b6d2
  • 相关阅读:
    抽取一个简单的按钮方法
    一些iOS笔试题目
    使用第三方框架 Masonry 实现自动布局
    AutoLayout适配
    iOS面试小题集锦
    大牛们的技术博客
    5、过滤流
    3、过滤文件夹
    1、File类简介
    贪婪模式和非贪婪模式
  • 原文地址:https://www.cnblogs.com/Mr-Rshare/p/10248447.html
Copyright © 2011-2022 走看看