滚动查看动画 [英] scrollintoview animation

问题描述

我的代码位于 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.有任何想法吗?谢谢.

I need to find a way to smooth the .scrollintoview(). Right now it 'jumps' to the highlighted row. I need it to smoothly transition to that row. It needs to be done dynamically in replacement of scrollintoview. Any ideas? Thanks.

推荐答案

在大多数现代浏览器中( Chrome和Firefox，但不能使用Safari，UC或IE )，则可以将对象中的选项传递给.scrollIntoView().

In most modern browsers (Chrome and Firefox, but not Safari, UC, or IE) you can pass options in an object to .scrollIntoView().

尝试一下:

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

其他值为behavior: 'instant'或block: 'start'或block: 'end'.参见 https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView

这篇关于滚动查看动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！