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
  • 相关阅读:
    socket上传nsdictionary的json数据异常
    Eclipse中如何关联Javadoc
    《算法导论》读书笔记之第8章 线性时间排序
    《算法导论》读书笔记之第6章 堆排序
    《算法导论》读书笔记之第3章 函数的增长
    《算法导论》读书笔记之第2章 算法入门
    《算法导论》读书笔记之第7章 快速排序
    堆排序
    八皇后
    行指针的理解
  • 原文地址:https://www.cnblogs.com/Mr-Rshare/p/10248447.html
Copyright © 2011-2022 走看看