小編這次要給大家分享的是vue如何實(shí)現(xiàn)編輯器鍵盤(pán)抬起時(shí)內(nèi)容跟隨光標(biāo)距頂位置向上滾動(dòng)效果，文章內(nèi)容豐富，感興趣的小伙伴可以來(lái)了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)基于分布式IDC數(shù)據(jù)中心構(gòu)建的平臺(tái)為眾多戶(hù)提供綿陽(yáng)服務(wù)器托管 四川大帶寬租用 成都機(jī)柜租用 成都服務(wù)器租用。

最近遇到了之前沒(méi)有碰到過(guò)的一個(gè)問(wèn)題：編輯器輸入內(nèi)容時(shí)，最好讓內(nèi)容一直保持在可視區(qū)域，比如如果區(qū)域超出的話(huà)，就在鍵盤(pán)抬起時(shí)向上滾動(dòng)一定距離。

這個(gè)和聊天發(fā)消息還有一定的區(qū)別，聊天的話(huà)是只要點(diǎn)開(kāi)輸入框，就將內(nèi)容定位到最下面： 即 dom.scrollTop = dom.scrollHeight即可，但是這個(gè)需要移動(dòng)的是一部分距離，經(jīng)過(guò)討論最好是讓當(dāng)前光標(biāo)的位置在鍵盤(pán)抬起時(shí)達(dá)到可視區(qū)域的最上面

那么這個(gè)距離肯定是根據(jù)光標(biāo)的距離頂部位置決定的，但是光標(biāo)距離頂部的距離我并沒(méi)有度到如何獲取，于是就自己瞎摸索，就有了接下來(lái)的解決辦法

原理是利用的是光標(biāo)屬性可以拿到當(dāng)前基于該屬性的dom結(jié)構(gòu)，就可以通過(guò)當(dāng)前dom距離頂部的offsetTop值判斷內(nèi)容本身在鍵盤(pán)抬起時(shí)到底向上滾多少

廢話(huà)不多說(shuō)，上代碼

let sel = window.getSelection();獲取光標(biāo)的所有屬性

通過(guò)打印它的一些屬性我們可以拿到一些我們所需要的東西（當(dāng)前dom）

console.log(sel.getRangeAt(0).commonAncestorContainer.parentElement)

這個(gè)拿到的就是你當(dāng)前的dom元素，只需要拿到它的offsetTop即可判斷界面到底向上滾動(dòng)多少

但是有的時(shí)候可能當(dāng)前的屬性是個(gè)行標(biāo)簽，拿不到offsetTop，那么我們可以找到基于它的父級(jí)塊標(biāo)簽，我這里的上一級(jí)就是塊標(biāo)簽，所以只需執(zhí)行

sel.getRangeAt(0).commonAncestorContainer.parentElement.parentNode.offsetTop

就可以拿到想要的值

再通過(guò)

this.$nextTick(() => {
 dom.scrollTop = ket;
 });

這里聲明必須在nextTick里進(jìn)行操作才能更改成功，否則是沒(méi)有效果的

完整demo

let sel = window.getSelection();
let ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop;
if(ket==0){//行標(biāo)簽
 ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.parentNode.offsetTop
}
 this.$nextTick(() => {
 dom.scrollTop = ket;
});

或者通過(guò)三元拿值

let ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop==0?sel.getRangeAt(0).commonAncestorContainer.parentElement.parentNode.offsetTop:sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop;

 this.$nextTick(() => {
 dom.scrollTop = ket;
});

這樣試反正我是成功了，這里說(shuō)一下鍵盤(pán)抬起不抬起不是我判斷是，是由app端調(diào)用我的方法告知我的，希望小伙伴們不要走彎路....

看完這篇關(guān)于vue如何實(shí)現(xiàn)編輯器鍵盤(pán)抬起時(shí)內(nèi)容跟隨光標(biāo)距頂位置向上滾動(dòng)效果的文章，如果覺(jué)得文章內(nèi)容寫(xiě)得不錯(cuò)的話(huà)，可以把它分享出去給更多人看到。