handsontable中的评论定位问题答案

【问题标题】：Comment positioning issue in handsontablehandsontable中的评论定位问题
【发布时间】：2015-04-27 10:42:18
【问题描述】：

我正在使用handsontable的comment和scroll功能，但是滚动时会导致评论定位错误。

这是jsfiddle的代码

请滚动然后悬停评论，它显示评论 div 超出了它的位置。

对象属性：

    data: getData(),   
    rowHeaders: true,
    colHeaders: true,
    minSpareRows: 1,
    contextMenu: true,
    comments: true,

我希望它与不滚动时一样。

【问题讨论】：

您的代码看起来正确，这可能是源代码的问题。您在此处使用的本机滚动仍处于“实验”模式，因此他们可能还没有解决此定位问题。
那么我可以尝试其他方法吗？就像改变 CSS 或其他东西一样。谢谢
这是可能的，虽然可能很难。看起来“位置”属性被设置为相对，但这并没有考虑到滚动。我所做的是制作自己的工具提示，我建议您这样做。

标签： javascript css handsontable

【解决方案1】：

问题是 placeCommentBox。它的偏移位置错误

基于这个post，我修改了handsontable.full.js。placeCommentBox函数应该是这样的：

 placeCommentBox = function (range, commentBox) {
  var TD = instance.view.wt.wtTable.getCell(range.from),
   // wrong offset offset = Handsontable.Dom.offset(TD),
    lastColWidth = instance.getColWidth(range.from.col);
    var rect = TD.getBoundingClientRect();
    var docEl = document.documentElement;
    var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
  commentBox.style.position = 'absolute';
  commentBox.style.left = offset.left + lastColWidth + 'px';
  commentBox.style.top = rectTop + 'px';
  commentBox.style.zIndex = 2;
  bindMouseEvent(range, commentBox);
},

您可以修改您的文件或等待修复错误。

【讨论】：

【解决方案2】：

编辑handsontable.full.js -> refreshEditorPosition: function()

在设置编辑器位置前添加window.pageXOffset

// offset bug
x += window.pageXOffset;
this.editor.setPosition(x, y);

【讨论】：