在鼠标移动到表格单元格时滚动表格包装器 div。（Chrome）

Question

我有一个表格，拖动单元格将突出显示该单元格，它工作正常。在最新版本的 Chrome 中，将鼠标移动到单元格上时，它会突出显示单元格，但滚动条不会在鼠标移动时向下/向上移动。

代码：

var SELECTION_START = 0;
var SELECTION_END = 1;

var selection = [getCellPos(), getCellPos()];

$tbl = $("#table-1");

function startSelection(event) {
    if (event.button === 2) { return false; }

    clearSelectionBorders();
    if (this !== $tbl.find('td.highlighted').last()[0]) {
        setSelection(this, SELECTION_START);
    }
    setSelection(this, SELECTION_END);

    $tbl.find("tr > *").mouseenter(moveSelection);
}

function stopSelection() {
    applySelectionHighlight();
    applySelectionBorders();

    $tbl.find("tr > *").off('mouseenter');
}

function moveSelection() {
    setSelection(this, SELECTION_END);
}

function setSelection(element, position) {
    element = $(element);
    var cellPos = getCellPos(element);
    selection[position] = cellPos;
    applySelectionHighlight();
}

function getCellPos(element) {
    element = $(element);
    if (element.length) return {
        col: element.index(),
        row: element.parent().parent().is($tbl.find('thead')) ? 0 : element.parent().index() + 1
    };
    return {
        row: -1,
        col: -1
    };
}

function getSelectionRect() {
    var rect = {
        x: 0,
        y: 0,
        width: 0,
        height: 0
    };
    rect.x = Math.min(selection[SELECTION_START].col, selection[SELECTION_END].col);
    rect.y = Math.min(selection[SELECTION_START].row, selection[SELECTION_END].row);
    rect.width = Math.max(selection[SELECTION_START].col, selection[SELECTION_END].col) + 1;
    rect.height = Math.max(selection[SELECTION_START].row, selection[SELECTION_END].row) + 1;

    if (rect.x === 0 && rect.width === 1) rect.width = $tbl.find('tr:first-child > *').length;
    if (rect.y === 0 && rect.height === 1) rect.height = $tbl.find('tr').length;

    return rect;
}

function applySelectionHighlight() {
    clearSelectionHighlight();

    var selectionRect = getSelectionRect();
    $tbl.find('thead tr > *').slice(selectionRect.x, selectionRect.width).addClass('highlighted');
    $tbl.find('tr').slice(selectionRect.y, selectionRect.height).each(function () {
        $(this).find('> th:first-child').addClass('highlighted');
        $(this).find('> *').slice(selectionRect.x, selectionRect.width).addClass('highlighted');
    });
}

function clearSelectionHighlight() {
    $tbl.find('tr > *').removeClass('highlighted');
}

function applySelectionBorders() {
    var allHighlighted = $tbl.find('.highlighted');
    allHighlighted.each(function (i, item) {
        var index = $(item).index();
        var b = $tbl.find("td.highlighted:last").addClass("autofill-cover");
        if (!$(item).prev().is('td.highlighted')) {
            $(item).addClass('left');
        }
        if (!$(item).next().is('td.highlighted')) {
            $(item).addClass('right');
        }
        if (!$(item).closest('tr').prev().find('td:nth-child(' + (index + 1) + ')').hasClass('highlighted')) {
            $(item).addClass('top');
        }
        if (!$(item).closest('tr').next().find('td:nth-child(' + (index + 1) + ')').hasClass('highlighted')) {
            $(item).addClass('bottom');
        }
    });
}

function clearSelectionBorders() {
    $tbl.find('td').removeClass('top bottom left right');
}

function clearAll() {
    selection = [getCellPos(), getCellPos()];
    clearSelectionHighlight()
    clearSelectionBorders();
}

$tbl.find("tr > *").mousedown(startSelection);
$(window).mouseup(stopSelection);

$(document).mousedown(function (event) {
    if ($(event.target).parents($tbl).length === 0) clearAll();
});

小提琴：https://jsfiddle.net/ggbhat/8uL0jw3j/

Answer 1

这种行为不是因为 Javascript，而是因为您在 Fiddle 中使用的 CSS：

table {
  user-select:none;
  -webkit-user-select:none;
}

拖动时的“自动”滚动因选择而被触发。这段 CSS 禁止选择表格（以及其中的任何内容），从而阻止滚动。

最好仍然允许用户选择表格及其内容，而是像这样更改所选元素的样式：

::selection{
  background: transparent;
}

::selection reference @ mdn