CSS设置自定义滚动条样式（兼容IE）

待我称王封你为后i 2023-01-13 15:52 126阅读 0赞

话不多说，直接看样式：（亲测 ie浏览器兼容）

.conversion_code{
    		overflow-x: scroll;
    		overflow-y: hidden;
    		width: 152px;
    		height: 30px;
    		font-size: 12px;
    		font-weight: 400;
    		text-align: center;
    		line-height: 32px;
    		letter-spacing: 0;
    	}
    	.conversion_code{
    		/*IE无法设置浏览器的宽度、高度，只能隐藏，并不影响滑动*/
    		-ms-scroll-chaining: chained;
    		-ms-overflow-style: none;
    		-ms-content-zooming: zoom;
    		-ms-scroll-rails: none;
    		-ms-content-zoom-limit-min: 100%;
    		-ms-content-zoom-limit-max: 500%;
    		-ms-scroll-snap-type: proximity;
    		-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    		-ms-overflow-style: none;
    		/*滚动条滑块按钮的颜色*/
    		scrollbar-face-color: #37C5E6;
    		/*滚动条整体颜色*/
    		scrollbar-highlight-color: #37C5E6;
    		/*滚动条轨道颜色*/
    		scrollbar-track-color: #42BCEE;
    		/*三角箭头的颜色*/
    		scrollbar-arrow-color: #fff;
    		/*滚动条阴影*/
    		scrollbar-shadow-color: #37C5E6;
    		/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
    		scrollbar-3dlight-color:#37C5E6;
    		/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
    		scrollbar-darkshadow-color: #37C5E6;
    		/*滚动条基准颜色*/
    		scrollbar-base-color: #37C5E6;
    	}
    	/* -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性  滚动条整体部分，可以设置宽度等*/
    	.conversion_code::-webkit-scrollbar{
    	  background-color: #37C5E6;
    	  width:5px;
    	  height:2px;
    	}
    	/*滚动条的轨道*/
    	.conversion_code::-webkit-scrollbar-track{
    	  background-color: #37C5E6;
    	  border-radius: 10px;
    	}
    	/*滚动条的滑块按钮*/
    	.conversion_code::-webkit-scrollbar-thumb{
    	  border-radius: 10px;
    	  background-color: #42BCEE;
    	}