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

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

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

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

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

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

廢話不多說，上代碼

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

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

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

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

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

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

就可以拿到想要的值

再通過

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

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

完整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;
});

或者通過三元拿值

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;
});

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

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

新聞名稱：vue如何實(shí)現(xiàn)編輯器鍵盤抬起時(shí)內(nèi)容跟隨光標(biāo)距頂位置向上滾動效果
路徑分享：http://www.aaarwkj.com/article46/pcsdeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、做網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)、營銷型網(wǎng)站建設(shè)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)