vue等框架對(duì)Tabs、Moda等設(shè)置固定高度后沒有滾動(dòng)條

當(dāng)彈窗不設(shè)置高度時(shí)，界面會(huì)根據(jù)內(nèi)容自動(dòng)擴(kuò)充高度，內(nèi)容過長(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 解決無法設(shè)置滾動(dòng)位置的問題

問題描述

在實(shí)現(xiàn)錨點(diǎn)定位的時(shí)候發(fā)現(xiàn)無法設(shè)置滾動(dòng)條的位置。

在Vue中，使用 document.body.scrollTop=952 無法設(shè)置滾動(dòng)條的高度。

document.body.scrollTop一直是0

原因

因?yàn)関ue的頁(yè)面指定了DTD，即指定了DOCTYPE時(shí)，使用document.documentElement。

頁(yè)面沒有DTD，即沒指定DOCTYPE時(shí)，使用document.body。

解決方案

document.documentElement=956

2018年10月10號(hào)新增

上面僅僅是說這個(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)過類似的問題，我前大佬告訴我的 ，當(dāng)時(shí)只是為了解決問題并沒有了解其原理，復(fù)制進(jìn)來就過去了。

現(xiàn)在做vue了，才知道哦，為什么要這樣寫，所以說項(xiàng)目太趕，只是為了完成任務(wù)，對(duì)個(gè)人能力并沒有提升，做完了就過了， 還要解決其他的bug，其他的任務(wù)，現(xiàn)在能夠靜下來在工作過程中學(xué)習(xí)+進(jìn)步，對(duì)個(gè)人的發(fā)展才是好的。工作不僅僅是工作完成任務(wù)，是一個(gè)自己發(fā)現(xiàn)自身問題，提升能力和對(duì)自己的技術(shù)實(shí)操實(shí)踐的過程。

到此這篇關(guān)于vue等框架對(duì)Tabs、Moda等設(shè)置固定高度后沒有滾動(dòng)條的文章就介紹到這了,更多相關(guān)vue設(shè)置固定高度沒有滾動(dòng)條內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！