2023年6月20日发(作者：)

css：设置滚动条样式⾼度⾃适应⼀、如何出现滚动条在样式中添加

overflow-y: scroll;⼆、修改滚动条样式2.1、⾸先在标签中定义⼀个class名

2.2、设置样式/*滚动条⼤⼩*/ .scroll::-webkit-scrollbar{ width:5px; height:10px; } /*正常情况下滑块的样式*/ .scroll::-webkit-scrollbar-thumb{ background-color:rgba(0,0,0,.05); border-radius:10px; -webkit-box-shadow:inset1px1px0rgba(0,0,0,.1); } /*⿏标悬浮在该类指向的控件上时滑块的样式*/ .scroll:hover::-webkit-scrollbar-thumb{ background-color:rgba(0,0,0,.2); border-radius:10px; -webkit-box-shadow:inset1px1px0rgba(0,0,0,.1); } /*⿏标悬浮在滑块上时滑块的样式*/ .scroll::-webkit-scrollbar-thumb:hover{ background-color:rgba(0,0,0,.4); -webkit-box-shadow:inset1px1px0rgba(0,0,0,.1); } /*正常时候的主⼲部分*/ .scroll::-webkit-scrollbar-track{ border-radius:10px; -webkit-box-shadow:inset006pxrgba(0,0,0,0); background-color:white; } /*⿏标悬浮在滚动条上的主⼲部分*/ .scroll::-webkit-scrollbar-track:hover{ -webkit-box-shadow:inset006pxrgba(0,0,0,.4); background-color:rgba(0,0,0,.01); }2.3、没有了，三、PC⾼度⾃适应(和上⾯的配合使⽤)3.1、标签
3.2、vue中datadata() { return { topHeight: 200, //导航栏或者顶部的⾼度 screenHeight: Height - ght, }},3.3、 watch: { screenHeight (val) { // 为了避免频繁触发resize函数导致页⾯卡顿，使⽤定时器 if (!) { // ⼀旦监听到的screenWidth值改变，就将其重新赋给data⾥的screenWidth Height = val; = true; let that = this; setTimeout(function () { // 打印screenWidth变化的值 (Height); = false }, 400) } } },3.4、 mounted () { const that = this; ze = () => { return (() => { // 可以限制最⼩⾼度 // if (Height - 240 < 450) { // return // } Height = Height- ght; Height = Height; })() } },3.5、打开PC浏览器测试

2023年6月20日发(作者：)

css：设置滚动条样式⾼度⾃适应⼀、如何出现滚动条在样式中添加

overflow-y: scroll;⼆、修改滚动条样式2.1、⾸先在标签中定义⼀个class名

2.2、设置样式/*滚动条⼤⼩*/ .scroll::-webkit-scrollbar{ width:5px; height:10px; } /*正常情况下滑块的样式*/ .scroll::-webkit-scrollbar-thumb{ background-color:rgba(0,0,0,.05); border-radius:10px; -webkit-box-shadow:inset1px1px0rgba(0,0,0,.1); } /*⿏标悬浮在该类指向的控件上时滑块的样式*/ .scroll:hover::-webkit-scrollbar-thumb{ background-color:rgba(0,0,0,.2); border-radius:10px; -webkit-box-shadow:inset1px1px0rgba(0,0,0,.1); } /*⿏标悬浮在滑块上时滑块的样式*/ .scroll::-webkit-scrollbar-thumb:hover{ background-color:rgba(0,0,0,.4); -webkit-box-shadow:inset1px1px0rgba(0,0,0,.1); } /*正常时候的主⼲部分*/ .scroll::-webkit-scrollbar-track{ border-radius:10px; -webkit-box-shadow:inset006pxrgba(0,0,0,0); background-color:white; } /*⿏标悬浮在滚动条上的主⼲部分*/ .scroll::-webkit-scrollbar-track:hover{ -webkit-box-shadow:inset006pxrgba(0,0,0,.4); background-color:rgba(0,0,0,.01); }2.3、没有了，三、PC⾼度⾃适应(和上⾯的配合使⽤)3.1、标签
3.2、vue中datadata() { return { topHeight: 200, //导航栏或者顶部的⾼度 screenHeight: Height - ght, }},3.3、 watch: { screenHeight (val) { // 为了避免频繁触发resize函数导致页⾯卡顿，使⽤定时器 if (!) { // ⼀旦监听到的screenWidth值改变，就将其重新赋给data⾥的screenWidth Height = val; = true; let that = this; setTimeout(function () { // 打印screenWidth变化的值 (Height); = false }, 400) } } },3.4、 mounted () { const that = this; ze = () => { return (() => { // 可以限制最⼩⾼度 // if (Height - 240 < 450) { // return // } Height = Height- ght; Height = Height; })() } },3.5、打开PC浏览器测试