css 设置浏览器滚动条

最新推荐文章于 2025-06-18 11:03:02 发布

心郎

最新推荐文章于 2025-06-18 11:03:02 发布

阅读量495

点赞数

CC 4.0 BY-SA版权

分类专栏：前段_css

本文链接：https://blog.youkuaiyun.com/u011301203/article/details/53573821

前段_css 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用CSS来定制和美化浏览器的滚动条，包括改变滚动条的颜色、宽度、滚动轨道样式以及滑块设计，让你的网页滚动体验更加优雅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<style type="text/css">
			/* 设置滚动条的样式 */
			::-webkit-scrollbar {    
				width: 20px;
				height: 20px;
			}
			/* 滚动槽 */
			::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px black;
				border-radius: 10px;
				background: burlywood;
			}
			/* 滚动条滑块 */
			::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background: mediumvioletred;
				-webkit-box-shadow: inset 0 0 6px yellow;
			}
			::-webkit-scrollbar-thumb:window-inactive {
			    background: paleturquoise;
			}
			/*两端按钮*/
			::-webkit-scrollbar-button{
				background:blueviolet;
			}
			div{
				height: 2000px;
				width: 2000px;
			}
			li{
				display: block;
			}
		</style>
	</head>
	<body>
		<div>
			<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>
			<li>21</li>
			<li>22</li>
			<li>23</li>
			<li>24</li>
			<li>25</li>
			<li>26</li>
			<li>27</li>
			<li>28</li>
			<li>29</li>
			<li>30</li>
			<li>31</li>
			<li>32</li>
			<li>33</li>
			<li>34</li>
			<li>35</li>
			<li>36</li>
			<li>37</li>
			<li>38</li>
			<li>39</li>
			<li>40</li>
			<li>41</li>
			<li>42</li>
			<li>43</li>
			<li>44</li>
			<li>45</li>
			<li>46</li>
			<li>47</li>
			<li>48</li>
			<li>49</li>
			<li>50</li>
			<li>51</li>
			<li>52</li>
			<li>53</li>
			<li>54</li>
			<li>55</li>
			<li>56</li>
			<li>57</li>
			<li>58</li>
			<li>59</li>
			<li>60</li>
			<li>61</li>
			<li>62</li>
			<li>63</li>
			<li>64</li>
			<li>65</li>
			<li>66</li>
			<li>67</li>
			<li>68</li>
			<li>69</li>
			<li>70</li>
			<li>71</li>
			<li>72</li>
			<li>73</li>
			<li>74</li>
			<li>75</li>
			<li>76</li>
			<li>77</li>
			<li>78</li>
			<li>79</li>
			<li>80</li>
			<li>81</li>
			<li>82</li>
			<li>83</li>
			<li>84</li>
			<li>85</li>
			<li>86</li>
			<li>87</li>
			<li>88</li>
			<li>89</li>
			<li>90</li>
			<li>91</li>
			<li>92</li>
			<li>93</li>
			<li>94</li>
			<li>95</li>
			<li>96</li>
			<li>97</li>
			<li>98</li>
			<li>99</li>
			<li>100</li>
		</div>
	</body>
</html>