我正在使用CodeMirror构建实时预览编辑器。我需要确定 CodeMirror 编辑器是否滚动到最底部,以便我也可以将预览滚动到底部。
我怎样才能确定这一点?
我正在使用CodeMirror构建实时预览编辑器。我需要确定 CodeMirror 编辑器是否滚动到最底部,以便我也可以将预览滚动到底部。
我怎样才能确定这一点?
您需要 codeMirror 中的滚动元素,然后在滚动事件上绑定一个函数。
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/html"
});
var scrollElement = editor.getScrollerElement();
console.log(scrollElement )
$(scrollElement).bind('scroll', function(e) {
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
console.log("bottom");
}
});
不得不对 aljordan82 的解决方案做一些小的调整:
var editor = CodeMirror.fromTextArea(document.getElementById('post'), {
'mode': 'gfm',
'lineNumbers': true,
'theme': 'default',
'lineWrapping': true,
});
var $preview = $('#preview-div');
var $scroller = $(editor.getScrollerElement());
$.fn.scrollHeight = function() {
return this[0].scrollHeight;
};
var atBottom = $scroller.scrollHeight() - $scroller.scrollTop() - $scroller.outerHeight() <= 0
&& $preview.scrollHeight() - $preview.scrollTop() - $preview.outerHeight() <= 0;
$preview.html(html);
if (atBottom) {
$preview.scrollTop($preview.scrollHeight());
}
我的预览 div 上的数字并不完全相等,所以我做<= 0
了。(2px 关闭,可能是由于边框?)