css：scrollbar样式修改及悬浮显示和放大
scrollbar 相关属性
/* 整个滚动条（包含横向和纵向）*/ ::-webkit-scrollbar {} /* 滚动条轨道部分 */ ::-webkit-scrollbar-track {} /* 滚动条没有滑块的轨道部分 */ ::-webkit-scrollbar-track-piece {} /* 滚动条滑块部分 */ ::-webkit-scrollbar-thumb {} /* 滚动条上下左右按钮 */ ::-webkit-scrollbar-button {} /* 横向滚动条和纵向滚动条交汇处小方块 */ ::-webkit-scrollbar-corner {} 复制代码整个滚动条
html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .scroll-wrap { margin: 50px auto; width: 200px; height: 200px; background: #414141; overflow: auto; } .scroll-container { width: 210px; height: auto; color: aliceblue; } .scroll-wrap::-webkit-scrollbar { width: 16px; height: 16px; border: 1px solid red; } 复制代码<body> <div class="scroll-wrap"> <div class="scroll-container"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> </ul> </div> </div> </body> 复制代码
滚动条轨道部分
.scroll-wrap::-webkit-scrollbar-track { background: orange; border: 1px solid blue; border-radius: 15px; } 复制代码没有滑块的轨道部分和滑块部分
.scroll-wrap::-webkit-scrollbar-track-piece { background-color: bisque; } .scroll-wrap::-webkit-scrollbar-thumb { background-color: aquamarine; } 复制代码按钮部分
.scroll-wrap::-webkit-scrollbar-button { background-color: blueviolet; } 复制代码交汇处
.scroll-wrap::-webkit-scrollbar-corner { background-color: yellowgreen; } 复制代码自定义滚动条，鼠标悬浮显示，鼠标悬浮到滚动滑块放大
html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } ul, li { display: block; margin: 0 auto; list-style: none; word-break: break-all; } .scroll-wrap { /* 防止遮挡内容 */ padding-right: 20px; margin: 50px auto; width: 500px; height: 200px; background: #111; overflow: hidden; } /* 悬浮显示滚动条 */ .scroll-wrap:hover { overflow-y: auto; } .scroll-container { width: 210px; color: aliceblue; } .scroll-wrap::-webkit-scrollbar { width: 12px; height: 12px; } .scroll-wrap::-webkit-scrollbar-track { background-image: linear-gradient(90deg, #2e2e2e 1px, #111 1px); } .scroll-wrap::-webkit-scrollbar-thumb { background-color: #2e2e2e; border-radius: 12px; /* padding-box 表示背景裁剪到内边距框， 这里也可以用content-box,表示裁剪到内容框， 默认为border-box，表示裁剪到边框*/ background-clip: padding-box; border-style: solid; border-width: 3px; border-color: transparent; } /* 悬浮放大滚动滑块 */ .scroll-wrap::-webkit-scrollbar-thumb:hover { background: #434343; /*这里默认裁剪到border-box，以下使用shadow代替了边框大小*/ border-width: 0; box-shadow: inset 3px 3px 3px hsl(0deg 0% 100% / 25%), inset -3px -3px 3px rgb(0 0 0 / 25%); }
作者：fifthThirteen
链接：https://juejin.cn/post/7029205505314652191