Vue中实现鼠标移入显示，移出隐藏滚动条

实现目标：鼠标移入显示滚动条，移出隐藏滚动条。

1、html 结构内容如下：

<template>
    <div id="vue-pdf-view" @mouseenter="pageMouseEnter($event)" @mouseleave="pageMouseLeave($event)">
        文本内容...
    </div>
</template>

注意：文本内容需要溢出容器才能显示滚动条。

代码说明：

<!-- 绑定鼠标移入事件 -->
@mouseenter="pageMouseEnter($event)" 

<!-- 绑定鼠标移出事件 -->
@mouseleave="pageMouseLeave($event)"

2、css 样式：

<style>
#vue-pdf-view {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 70%;
    height: 100%;
    text-align: center;

    /* 内容溢出显示滚动条 */
    overflow: scroll;
    /* 隐藏x、y轴滚动条 */
    overflow-y: hidden;
    overflow-x: hidden;
}

/* 设置滚动栏的宽、高 */
#vue-pdf-view::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 设置滚动条的样式 */
#vue-pdf-view::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #eee;
}

/* 鼠标经过滚动条变换颜色 */
#vue-pdf-view::-webkit-scrollbar-thumb:hover {
    background-color: #CBCBFF;
}
</style>

注意：该样式存在兼容性问题，只在以 webkit 为内核的浏览器才可使用。

3、js 功能实现：

// 鼠标移入显示 y轴 滚动条
function pageMouseEnter(e) {
    e.target.style.overflowY = 'visible';
}
// 鼠标移出隐藏 y轴 滚动条
function pageMouseLeave(e) {
    e.target.style.overflowY = 'hidden';
}

4、效果演示

---

补充：实现隐藏滚动条，但保留滚动的功能：

#vue-pdf-view::-webkit-scrollbar {
    display: none;
}

---

其他实现方案（转载）：滚动条在不滚动时自动隐藏和滚动时自动显示，不占用网页布局

注：该方法未经测试，此处只做记录。