滚动到 View 动画

Question

我的代码位于http://jsfiddle.net/mannagod/QT3v5/7/ .

JS 是:

function delay() {
    var INTENDED_MONTH = 7 //August
    // INTENDED_MONTH is zero-relative
    now = new Date().getDate(),
rows = document.getElementById('scripture').rows;
    if (new Date().getMonth() != INTENDED_MONTH) {
        // need a value here less than 1, 
        // or the box for the first of the month will be in Red
        now = 0.5
    };
    for (var i = 0, rl = rows.length; i < rl; i++) {
        var cells = rows[i].childNodes;
        for (j = 0, cl = cells.length; j < cl; j++) {
            if (cells[j].nodeName == 'TD'
  && cells[j].firstChild.nodeValue != ''
  && cells[j].firstChild.nodeValue == now) {
                // 'ffff99' // '#ffd700' // TODAY - red
                rows[i].style.backgroundColor = 'red' 
                rows[i].scrollIntoView();
            }
        }
    }
}

我需要找到一种方法来平滑 .scrollintoview()。现在它“跳”到突出显示的行。我需要它顺利过渡到该行。它需要动态完成以代替scrollintoview。有任何想法吗？谢谢。

Answer 1

在大多数现代浏览器 ( Chrome and Firefox, but not Safari, UC, or IE ) 中，您可以将对象中的选项传递给 .scrollIntoView()。

试试这个:

elm.scrollIntoView({ behavior: 'smooth', block: 'center' })

其他值包括behavior:'instant'或block:'start'或block:'end'。请参阅https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView