zoukankan      html  css  js  c++  java
  • 如何让原生滚动条美丽动人

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<style>
    		#max{
    			 200px;
    			height: 200px;
    			border:1px solid black;
    			overflow-y: auto;
    		}
    		span{
    			display: block;
    		}
    		::-webkit-scrollbar{
    			 8px;
    		}
    		::-webkit-scrollbar-thumb{
    			background-color: red;
    			border-radius: 5px 5px;
    		}
    	</style>
    	<body>
    	<div id="max">
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    		<span>a1</span>
    	</div>
    	</body>
    </html>
    

      ::-webkit-scrollbar 滚动条整体样式

       ::-webkit-scrollbar-thumb   滚动条的滑块部分

    ::-webkit-scrollbar-track  滚动条的轨道样式 (本文html没用到,个人感觉不需要用到,如果需要用到的朋友可以用一下)

    欢迎加群 822162679 吹牛皮

  • 相关阅读:
    官方源、镜像源汇总
    Kubernetes V1.15 二进制部署集群
    ZABBIX 4.0 LTS 部署
    SSH + Google Authenticator 安全加固
    Hadoop+HBase 集群搭建
    自动化运维之PSSH
    KVM之CPU虚拟化
    GoAccess日志分析工具
    HTTPS之acme.sh申请证书
    AWStats日志分析系统
  • 原文地址:https://www.cnblogs.com/GeekXwj/p/9407944.html
Copyright © 2011-2022 走看看