vue等框架對(duì)Tabs、Moda等設(shè)置固定高度后沒(méi)有滾動(dòng)條問(wèn)題
vue等框架對(duì)Tabs、Moda等設(shè)置固定高度后沒(méi)有滾動(dòng)條
當(dāng)彈窗不設(shè)置高度時(shí)，界面會(huì)根據(jù)內(nèi)容自動(dòng)擴(kuò)充高度，內(nèi)容過(guò)長(zhǎng)時(shí)會(huì)非常難看，需要設(shè)置固定高度，當(dāng)超出這個(gè)高度后悔出現(xiàn)滾動(dòng)條。效果如下圖：
其實(shí)很簡(jiǎn)單，在你需要控制高度的地方加上一行代碼
style="height:400px;overflow-y:auto;overflow-x:hidden;"
以下為我加的位置：
是不是滿足您的需求？
補(bǔ)充：vue 解決無(wú)法設(shè)置滾動(dòng)位置的問(wèn)題
問(wèn)題描述
在實(shí)現(xiàn)錨點(diǎn)定位的時(shí)候發(fā)現(xiàn)無(wú)法設(shè)置滾動(dòng)條的位置。
在Vue中，使用 document.body.scrollTop=952 無(wú)法設(shè)置滾動(dòng)條的高度。
document.body.scrollTop一直是0
原因
因?yàn)関ue的頁(yè)面指定了DTD，即指定了DOCTYPE時(shí)，使用document.documentElement。
頁(yè)面沒(méi)有DTD，即沒(méi)指定DOCTYPE時(shí)，使用document.body。
解決方案
document.documentElement=956
2018年10月10號(hào)新增
上面僅僅是說(shuō)這個(gè)頁(yè)面的滾動(dòng)條高度的設(shè)定，當(dāng)我頁(yè)面內(nèi)的一個(gè)div的滾動(dòng)條設(shè)定他的高度 如下解決方案
var anchor = this.$el.querySelector('.message-list')
this.$nextTick(() => {
document.querySelector('.message-list').scrollTop = anchor.scrollHeight
})這個(gè)解決方案在我做ng的時(shí)候又出現(xiàn)過(guò)類(lèi)似的問(wèn)題，我前大佬告訴我的 ，當(dāng)時(shí)只是為了解決問(wèn)題并沒(méi)有了解其原理，復(fù)制進(jìn)來(lái)就過(guò)去了。
現(xiàn)在做vue了，才知道哦，為什么要這樣寫(xiě)，所以說(shuō)項(xiàng)目太趕，只是為了完成任務(wù)，對(duì)個(gè)人能力并沒(méi)有提升，做完了就過(guò)了， 還要解決其他的bug，其他的任務(wù)，現(xiàn)在能夠靜下來(lái)在工作過(guò)程中學(xué)習(xí)+進(jìn)步，對(duì)個(gè)人的發(fā)展才是好的。工作不僅僅是工作完成任務(wù)，是一個(gè)自己發(fā)現(xiàn)自身問(wèn)題，提升能力和對(duì)自己的技術(shù)實(shí)操實(shí)踐的過(guò)程。
到此這篇關(guān)于vue等框架對(duì)Tabs、Moda等設(shè)置固定高度后沒(méi)有滾動(dòng)條的文章就介紹到這了,更多相關(guān)vue設(shè)置固定高度沒(méi)有滾動(dòng)條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3?vite配置css?的sourceMap及文件引用配置別名的過(guò)程
這篇文章主要介紹了Vue3 vite配置css的sourceMap,及文件引用配置別名的過(guò)程，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
Vue簡(jiǎn)化用戶查詢/添加功能的實(shí)現(xiàn)
本文主要介紹了Vue簡(jiǎn)化用戶查詢/添加功能的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Vue+Element?UI實(shí)現(xiàn)復(fù)制當(dāng)前行數(shù)據(jù)的功能
這篇文章主要介紹了如何使用Vue?+?Element?UI?實(shí)現(xiàn)在列表的操作欄新增一個(gè)復(fù)制按鈕,復(fù)制當(dāng)前行的數(shù)據(jù)可以打開(kāi)新增彈窗后亦可以跳轉(zhuǎn)到新增頁(yè)面,感興趣的小伙伴可以參考下2023-11-11
Vue全局共享數(shù)據(jù)之globalData,vuex,本地存儲(chǔ)的使用
這篇文章主要介紹了Vue全局共享數(shù)據(jù)之globalData,vuex,本地存儲(chǔ)的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
在項(xiàng)目開(kāi)發(fā)中,有兩個(gè)功能特別類(lèi)似,如果單獨(dú)實(shí)現(xiàn),會(huì)有很多重復(fù)的代碼，這時(shí)候就會(huì)用到邏輯復(fù)用，本文主要介紹了vue3?邏輯復(fù)用的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下2024-02-02
這篇文章主要介紹了詳解Nuxt.js部署及踩過(guò)的坑，Nuxt.js 提供了兩種發(fā)布部署應(yīng)用的方式：服務(wù)端渲染應(yīng)用部署 和 靜態(tài)應(yīng)用部署。本文主要說(shuō)說(shuō)服務(wù)端渲染應(yīng)用部署，感興趣的小伙伴們可以參考一下2018-08-08
記錄一個(gè)van-list不斷onLoad加載的坑及解決
這篇文章主要介紹了記錄一個(gè)van-list不斷onLoad加載的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue數(shù)據(jù)更新頁(yè)面卻沒(méi)有更新的幾種情況以及解決方法
我們?cè)陂_(kāi)發(fā)過(guò)程中會(huì)碰到數(shù)據(jù)更新,但是頁(yè)面卻沒(méi)有更新的情況,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)更新頁(yè)面卻沒(méi)有更新的幾種情況以及解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
由于公司網(wǎng)絡(luò)登element-ui官方文檔很慢,想把他載下來(lái)離線文檔本地跑,下面這篇文章主要給大家介紹了關(guān)于本地部署element-plus文檔的簡(jiǎn)單步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
關(guān)掉vue插件Vetur格式化的時(shí)候自動(dòng)添加的樣式操作
這篇文章主要介紹了關(guān)掉vue插件Vetur格式化的時(shí)候自動(dòng)添加的樣式操作，文章圍繞主題展開(kāi)操作過(guò)程，需要的小伙伴可以參考一下，希望對(duì)你有所幫助2022-05-05