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

  • 相关阅读:
    C#写入系统日志(日志位置)
    vue element enter事件
    C#记一次配置文件的坑
    C#简单解决winfrom窗体打开时候闪动
    C#语言切换
    C#textbox允许换行
    C#中窗体边框隐藏
    C#背景图片自适应
    IOC的实现原理—反射与工厂模式
    终生学习
  • 原文地址:https://www.cnblogs.com/GeekXwj/p/9407944.html
Copyright © 2011-2022 走看看