快捷導(dǎo)航

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

更新時間：2020年05月28日 17:09:10 作者：碼工思博

這篇文章主要介紹了vue實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標(biāo)距頂位置向上滾動效果，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

最近遇到了之前沒有碰到過的一個問題：編輯器輸入內(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)用我的方法告知我的，希望小伙伴們不要走彎路....

總結(jié)

到此這篇關(guān)于vue實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標(biāo)距頂位置向上滾動效果的文章就介紹到這了,更多相關(guān)vue編輯器鍵盤抬起內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: