css：设置滚动条样式&高度自适应-蒲公英云

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

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

一、如何出现滚动条

在样式中添加

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;
    -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" style="overflow-y: scroll;" :style="{ height: screenHeight + 'px' }">

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;
        })()
      }
    },