CSS问题：如何实现滚动条的下拉滚动提示效果？

100人浏览 2024-09-02 08:18:25

ONE

需求分析，问题描述

一、需求

一个可以滚动的菜单，为它添加一个可以下拉滚动的提示。要求滚动到菜单最底部时，隐藏下拉滚动的提示，否则让其一直显示。

二、问题

1、如何实现滚动条效果？

2、如何判断是否滚动到底部？

TWO

解决问题，答案速览

实现代码如下，复制粘贴即可直接使用。

代码中滚动条的实现使用了element的el-scrollbar组件。组件中包裹的第一个div，指的是需要滚动的视图。组件中包裹的第二个div，指的是下拉滚动提示的图标，这里根据需求进行设置，可以更换静态的或者那种闪烁跳跃的动态提示图标。

// 1、模版
<el-scrollbar max-height="calc(100vh - 84px)" @scroll="handleScroll" ref="myScrollbar">
<div class="sideBarIn"></div>
<div class="pcSign pcIcon" v-if="isShowIcon">
<img class="iconImg" src="../assets/images/common/xiaGery.png"></div>
</el-scrollbar>


// 2、逻辑
// 滚动条事件
const handleScroll = (val) => {
// 防止Scrollbar实例为空
if (!myScrollbar.value) {
return
}

// 判断是否滚动到底部
let isScrollToEnd = Number(myScrollbar.value.wrapRef.scrollTop.toFixed(0)) 
+ Number(myScrollbar.value.wrapRef.clientHeight.toFixed(0))
=== Number(myScrollbar.value.wrapRef.scrollHeight.toFixed(0));

if (isScrollToEnd) {
// 滚动到底部的处理逻辑
isShowIcon.value = false
} else {
// 非滚动到底部的处理逻辑
isShowIcon.value = true
}
}


// 3、样式
.pcIcon {
width:100%;
height: 100px;
position: absolute;
bottom: -4px;
left: 0;
text-align: center;
line-height: 130px;
background: linear-gradient(to bottom, rgba(234, 234, 234, 0.5), rgba(234, 234, 234, 1));

.iconImg {
width: 20px;
height: 20px;
}
}
.pcSign{
display: block;
}