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 吹牛皮

  • 相关阅读:
    距离计算
    推荐系统
    jvm内存配置参数
    Vim 文件配置
    [转]linux shell 多线程实现
    synchronized 和 ReentrantLock 区别
    sptring boot 修改默认Banner
    Java容器类总结
    JAVA基本类型和包装类
    Linux 虚拟内存机制
  • 原文地址:https://www.cnblogs.com/GeekXwj/p/9407944.html
Copyright © 2011-2022 走看看