css：设置滚动条样式⾼度⾃适应⼀、如何出现滚动条
在样式中添加
overflow-y: scroll;
⼆、修改滚动条样式
2.1、⾸先在标签中定义⼀个class名
<div class="scroll">
2.2、设置样式
/*滚动条⼤⼩*/
.scroll::-webkit-scrollbar{
width:5px;
height:10px;
}
/*正常情况下滑块的样式*/
.scroll::-webkit-scrollbar-thumb{
background-color:rgba(0,0,0,.05);
border-radius:10px;
html横向滚动条样式-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、标签
<div class="scroll" :>
3.2、vue中data
data() {
return {
topHeight: 200, //导航栏或者顶部的⾼度
screenHeight: document.body.clientHeight - pHeight,
}
},
3.3、
watch: {
screenHeight (val) {
// 为了避免频繁触发resize函数导致页⾯卡顿，使⽤定时器
if (!this.timer) {
// ⼀旦监听到的screenWidth值改变，就将其重新赋给data⾥的screenWidth          this.screenHeight = val;
this.timer = true;
let that = this;
setTimeout(function () {
// 打印screenWidth变化的值
console.log(that.screenHeight);
that.timer = false
}, 400)
}
}
},
3.4、
mounted () {
const that = this;
return (() => {
// 可以限制最⼩⾼度
// if (document.body.clientHeight - 240 < 450) {
//  return
// }
window.screenHeight = document.body.pHeight;
that.screenHeight = window.screenHeight;
})()
}
},
3.5、打开PC浏览器测试

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。