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