hover显示滚动条

SunFlower914

已于 2023-07-12 16:18:35 修改

阅读量933

点赞数 1

文章标签： css css3 html

于 2023-04-18 17:43:08 首次发布

本文链接：https://blog.csdn.net/sunflower914/article/details/130227387

版权

目标：在card-content盒子内容溢出的情况下，先隐藏滚动条，当用户将鼠标移入盒子内部后，显示滚动条，我这里只用到y轴滚动条

效果：

代码：

    .card-content {
      padding: 20px;
      height: calc(100% - 55px);
      overflow: hidden;
      &:hover {
        overflow-y: overlay;
      }
      &::-webkit-scrollbar {
        /*滚动条宽高*/
        width: 6px;
        height: 6px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        transition: all 0.2s ease-in-out;
        background-color: transparent;
      }
      &:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2) !important;
      }
    }