动态显示滚动条(鼠标进入才显示)

DO_IT_JACK

已于 2024-06-30 07:51:29 修改

阅读量981

点赞数 28

分类专栏：前端总结前端vue总结文章标签：前端 vue.js javascript

于 2024-06-29 13:05:33 首次发布

本文链接：https://blog.csdn.net/weixin_40231090/article/details/140062680

版权

前端总结同时被 2 个专栏收录

18 篇文章 2 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

前端vue总结

17 篇文章 0 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

需求

鼠标进入区域后，才显示滚动条，界面更加美观一些

★纯css方案

<template>
  <div>
    <div style="height: 500px;border: 1px solid red;overflow: scroll">
      <div style="height: 600px;width: 300px">
        内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容
      </div>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped>
  /*可以设置成全局样式
  *鼠标进入显示的区域后，如果有滚动条，则出现
  */
  /*定义滚动条高宽及背景
  高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
  }

  /*定义滑块
  内阴影+圆角*/
  /*  鼠标hover的时候才显示滚动条 */
  :hover::-webkit-scrollbar-thumb {