紅魔電競平板評測：大屏幕硬實力
前言：三年的疫情因為要上網課的原因激活了平板市場，如今網課的時代已經過去，大家的生活都恢復到了正軌，這也就意味著，真正考驗平板電腦生存的環境來了。也就是面對著這種殘酷的
一個可以滾動的菜單，為它添加一個可以下拉滾動的提示。要求滾動到菜單最底部時，隱藏下拉滾動的提示，否則讓其一直顯示。
實現代碼如下，復制粘貼即可直接使用。
代碼中滾動條的實現使用了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;}實現滾動條效果有兩種實現方式：利用css的overflow: scroll屬性、利用element的el-scrollbar組件。
在div元素上添加 overflow-y: scroll; css屬性，就能顯示出一個滾動條，如果不指定是x或y軸，則水平和垂直都會出現滾動條。
當然，前提是你需要指定div元素的高度或者最大高度。
一般在vue項目中，我們可直接使用element的el-scrollbar組件，因為官方為我們提供了許多API，以及各種適配優化。
el-scrollbar組件的屬性如下：
el-scrollbar組件的事件如下：
el-scrollbar組件的實例屬性如下：
這里判斷是否滾動到底部的關鍵在于scrollTop+clientHeight是否等于scrollHeight的值。只有當滾動的距離+可視區域的高度，與scrollHeight相等時，才證明滾動條滾動到了底部。
同樣的，如果scrollHeight與可視區域的高度直接就相等時，又說明元素不可以滾動，也就沒有滾動條。這一點在有此需求時，可以進行實用。
元素的幾個寬高屬性釋義如下：
本文鏈接：http://www.www897cc.com/showinfo-26-33355-0.htmlCSS問題：如何實現滾動條的下拉滾動提示效果？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Go 命名規范：全面指南
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號