溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue如何實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標(biāo)距頂位置向上滾動效果

發(fā)布時間：2020-07-21 16:02:10 來源：億速云 閱讀：348 作者：小豬 欄目：web開發(fā)

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

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

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

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

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

廢話不多說，上代碼

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

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

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

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

但是有的時候可能當(dāng)前的屬性是個行標(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如何實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標(biāo)距頂位置向上滾動效果的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手