一、需求分析，問(wèn)題描述

1、需求

一個(gè)可以滾動(dòng)的菜單，為它添加一個(gè)可以下拉滾動(dòng)的提示。要求滾動(dòng)到菜單最底部時(shí)，隱藏下拉滾動(dòng)的提示，否則讓其一直顯示。

2、問(wèn)題

• 如何實(shí)現(xiàn)滾動(dòng)條效果？
• 如何判斷是否滾動(dòng)到底部？

二、解決問(wèn)題，答案速覽

實(shí)現(xiàn)代碼如下，復(fù)制粘貼即可直接使用。

代碼中滾動(dòng)條的實(shí)現(xiàn)使用了element的el-scrollbar組件。組件中包裹的第一個(gè)div，指的是需要滾動(dòng)的視圖。組件中包裹的第二個(gè)div，指的是下拉滾動(dòng)提示的圖標(biāo)，這里根據(jù)需求進(jìn)行設(shè)置，可以更換靜態(tài)的或者那種閃爍跳躍的動(dòng)態(tài)提示圖標(biāo)。

// 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、邏輯
// 滾動(dòng)條事件
const handleScroll = (val) => {
// 防止Scrollbar實(shí)例為空
if (!myScrollbar.value) {
return
}
// 判斷是否滾動(dòng)到底部
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) {
// 滾動(dòng)到底部的處理邏輯
isShowIcon.value = false
} else {
// 非滾動(dòng)到底部的處理邏輯
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;
}

三、問(wèn)題解析，知識(shí)總結(jié)

1、如何實(shí)現(xiàn)滾動(dòng)條效果？

實(shí)現(xiàn)滾動(dòng)條效果有兩種實(shí)現(xiàn)方式：利用css的overflow: scroll屬性、利用element的el-scrollbar組件。

overflow: scroll屬性

在div元素上添加 overflow-y: scroll; css屬性，就能顯示出一個(gè)滾動(dòng)條，如果不指定是x或y軸，則水平和垂直都會(huì)出現(xiàn)滾動(dòng)條。

當(dāng)然，前提是你需要指定div元素的高度或者最大高度。

el-scrollbar組件

一般在vue項(xiàng)目中，我們可直接使用element的el-scrollbar組件，因?yàn)楣俜綖槲覀兲峁┝嗽S多API，以及各種適配優(yōu)化。

el-scrollbar組件的屬性如下：

el-scrollbar組件的事件如下：

el-scrollbar組件的實(shí)例屬性如下：

2、如何判斷是否滾動(dòng)到底部？

這里判斷是否滾動(dòng)到底部的關(guān)鍵在于scrollTop+clientHeight是否等于scrollHeight的值。只有當(dāng)滾動(dòng)的距離+可視區(qū)域的高度，與scrollHeight相等時(shí)，才證明滾動(dòng)條滾動(dòng)到了底部。

同樣的，如果scrollHeight與可視區(qū)域的高度直接就相等時(shí)，又說(shuō)明元素不可以滾動(dòng)，也就沒(méi)有滾動(dòng)條。這一點(diǎn)在有此需求時(shí)，可以進(jìn)行實(shí)用。

元素的幾個(gè)寬高屬性釋義如下：