vue等框架對Tabs、Moda等設(shè)置固定高度后沒有滾動條問題
vue等框架對Tabs、Moda等設(shè)置固定高度后沒有滾動條
當(dāng)彈窗不設(shè)置高度時,界面會根據(jù)內(nèi)容自動擴充高度,內(nèi)容過長時會非常難看,需要設(shè)置固定高度,當(dāng)超出這個高度后悔出現(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è)定,當(dāng)我頁面內(nèi)的一個div的滾動條設(shè)定他的高度 如下解決方案
var anchor = this.$el.querySelector(".message-list") this.$nextTick(() => {document.querySelector(".message-list").scrollTop = anchor.scrollHeight })
這個解決方案在我做ng的時候又出現(xiàn)過類似的問題,我前大佬告訴我的 ,當(dāng)時只是為了解決問題并沒有了解其原理,復(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)文章希望大家以后多多支持!
