css：设置滚动条样式&高度自适应

向右看齐 2023-01-22 04:59 45阅读 0赞

### 一、如何出现滚动条 ###

在样式中添加

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中data

data() {
          return {
            topHeight: 200, //导航栏或者顶部的高度
            screenHeight: document.body.clientHeight - this.topHeight,
          }
    },

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;
          window.onresize = () => {
            return (() => {
              // 可以限制最小高度
              // if (document.body.clientHeight - 240 < 450) {
              //   return
              // }
              window.screenHeight = document.body.clientHeight- this.topHeight;
              that.screenHeight = window.screenHeight;
            })()
          }
        },

3.5、打开PC浏览器测试