本文共 2962 字，大约阅读时间需要 9 分钟。

-----------------------------------------------------------

在做完广告词高亮提醒后，进行了一下测试，总体来说，结果不错，符合预期了，但是，当我将内容弄了好几屏之后，意外发生了，选中的词在屏幕之外，但滚动条没动！这是什么鬼！于是，看看百度编辑器自己的搜索吧，结果，加载了searchreplace按钮后，进行搜索，一样是屏幕没有滚动！这是什么鬼！Are you kidding me？文盲当时是一脸懵逼啊，百度编辑器开发人员，你们脑袋里有坑么？无力吐槽了。。。。

算了，自己去解决这个问题吧

仔细观察了一下，百度编辑器的滚动条其实是分情况的，一种是autoHeightEnabled=true的时候，这个时候编辑器时自动缩放高度，以适应内容的，所以滚动条应该使用编辑器所在页面的滚动条，另一种就是autoHeightEnabled=false，这个时候，不进行自动缩放了，就需要使用编辑器自身的滚动条了

第一步：对编辑器追加一个scrollTo方法，用来进行滚动条管理

打开src\core\editor.js，这个文件里定义了编辑器可调用的各种内置方法

我们找到Editor.prototype这个定义，追加我们的代码

Editor.prototype = {        scrollTo: function (x, y) {            var me = this;            var win = me.autoHeightEnabled ? me.window.parent : me.window;        },....}

嗯。。。文盲的思路比较偏颇了，对于滚动位置，使用坐标来描述，原因是编辑器内的所有元素都可以获得对于编辑器内文档的坐标

第二步：获得编辑器当前滚动坐标

在这里，老顾仔细观察了一下，如果是自适应高的话，就不说了，需要获得编辑器所在位置，参与到滚动条计算里

如果是非自适应高的话，那么，百度编辑器的滚动条其实是编辑器对应的iframe所属的window

嗯，也就是上边 win 的定义

然后获取具体数据

var loc = me.autoHeightEnabled ? $(me.container).position() : { top: 0, left: 0 };            var vh = win.innerHeight; // iframe 内置文档显示高            var vw = win.innerWidth; // iframe 内置文档显示宽            var dh = win.document.body.scrollHeight; // iframe 内置文档总高            var dw = win.document.body.scrollWidth; // iframe 内置文档总宽            var t_top = win.scrollY;            var t_left = win.scrollX;

其中loc就是针对编辑器自适应高时，编辑器所在的位置，当然，如果你的编辑器的祖辈们出现了position定义，比如absolute、relative、fixed的话，那你还得从新计算他的位置，很麻烦

第三步：换算出滚动条移动位置

最就是判定，我们要移动的位置是否显示在当前屏幕了，如果没有在当前屏幕内，换算出需要将滚动条移动到哪里

if (t_left - loc.left > x) {                t_left = x - vw / 2 + loc.left;            }            if (t_top - loc.top > y) {                t_top = y - vh / 2 + loc.top;            }            if (t_left + vw - loc.left < x) {                t_left = x - vw / 2 + loc.left;            }            if (t_top + vh - loc.top < y) {                t_top = y - vh / 2 + loc.top;            }            win.scrollTo(t_left, t_top);

这样我们就可以在搜索时加上 editor.scrollTo(0,100)这样的指令进行滚动条管理了

完整scrollTo

scrollTo: function (x, y) {            var me = this;            var win = me.autoHeightEnabled ? me.window.parent : me.window;            var loc = me.autoHeightEnabled ? $(me.container).position() : { top: 0, left: 0 };            var vh = win.innerHeight; // iframe 内置文档显示高            var vw = win.innerWidth; // iframe 内置文档显示宽            var dh = win.document.body.scrollHeight; // iframe 内置文档总高            var dw = win.document.body.scrollWidth; // iframe 内置文档总宽            var t_top = win.scrollY;            var t_left = win.scrollX;            if (t_left - loc.left > x) {                t_left = x - vw / 2 + loc.left;            }            if (t_top - loc.top > y) {                t_top = y - vh / 2 + loc.top;            }            if (t_left + vw - loc.left < x) {                t_left = x - vw / 2 + loc.left;            }            if (t_top + vh - loc.top < y) {                t_top = y - vh / 2 + loc.top;            }            win.scrollTo(t_left, t_top);        },

转载地址：http://jxvxi.baihongyu.com/