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

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

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

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

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

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

原理是利用的是光標屬性可以拿到當前基于該屬性的dom結構，就可以通過當前dom距離頂部的offsetTop值判斷內容本身在鍵盤抬起時到底向上滾多少

廢話不多說，上代碼

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

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

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

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

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

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

就可以拿到想要的值

再通過

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

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

完整demo

let sel = window.getSelection();
let ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop;
if(ket==0){//行標簽
 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端調用我的方法告知我的，希望小伙伴們不要走彎路....

總結

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

您可能感興趣的文章: