2023 年的 Node.js 生態(tài)系統(tǒng)
隨著技術(shù)的不斷演進(jìn)和創(chuàng)新，Node.js 在 2023 年達(dá)到了一個(gè)新的高度。Node.js 擁有一個(gè)龐大的生態(tài)系統(tǒng)，可以幫助開發(fā)人員更快地實(shí)現(xiàn)復(fù)雜的應(yīng)用。本文就來看看 Node.js 最新的生
一個(gè)可以滾動(dòng)的菜單，為它添加一個(gè)可以下拉滾動(dòng)的提示。要求滾動(dòng)到菜單最底部時(shí)，隱藏下拉滾動(dòng)的提示，否則讓其一直顯示。
實(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;}實(shí)現(xiàn)滾動(dòng)條效果有兩種實(shí)現(xiàn)方式：利用css的overflow: scroll屬性、利用element的el-scrollbar組件。
在div元素上添加 overflow-y: scroll; css屬性，就能顯示出一個(gè)滾動(dòng)條，如果不指定是x或y軸，則水平和垂直都會(huì)出現(xiàn)滾動(dòng)條。
當(dāng)然，前提是你需要指定div元素的高度或者最大高度。
一般在vue項(xiàng)目中，我們可直接使用element的el-scrollbar組件，因?yàn)楣俜綖槲覀兲峁┝嗽S多API，以及各種適配優(yōu)化。
el-scrollbar組件的屬性如下：
el-scrollbar組件的事件如下：
el-scrollbar組件的實(shí)例屬性如下：
這里判斷是否滾動(dòng)到底部的關(guān)鍵在于scrollTop+clientHeight是否等于scrollHeight的值。只有當(dāng)滾動(dòng)的距離+可視區(qū)域的高度，與scrollHeight相等時(shí)，才證明滾動(dòng)條滾動(dòng)到了底部。
同樣的，如果scrollHeight與可視區(qū)域的高度直接就相等時(shí)，又說明元素不可以滾動(dòng)，也就沒有滾動(dòng)條。這一點(diǎn)在有此需求時(shí)，可以進(jìn)行實(shí)用。
元素的幾個(gè)寬高屬性釋義如下：
本文鏈接：http://www.www897cc.com/showinfo-26-33355-0.htmlCSS問題：如何實(shí)現(xiàn)滾動(dòng)條的下拉滾動(dòng)提示效果？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： Go 命名規(guī)范：全面指南
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)