实现目标：鼠标移入显示滚动条，移出隐藏滚动条。
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;
}
其他实现方案（转载）：滚动条在不滚动时自动隐藏和滚动时自动显示，不占用网页布局文章来源：https://www.toymoban.com/news/detail-855443.html
注：该方法未经测试，此处只做记录。文章来源地址https://www.toymoban.com/news/detail-855443.html
到了这里，关于Vue中实现鼠标移入显示，移出隐藏滚动条的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
