react - scrollintoview offset

animación scrollintoview

Question

Mi código está en http://jsfiddle.net/mannagod/QT3v5/7/ .

El JS es:

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();
            }
        }
    }
}

Necesito encontrar una manera de suavizar el .scrollintoview() . En este momento ''salta'' a la fila resaltada. Lo necesito para una transición suave a esa fila. Debe hacerse dinámicamente en reemplazo de scrollintoview. ¿Algunas ideas? Gracias.

Answer 1

Hay un plugin jQuery exactamente para eso

Aquí está el enlace a una publicación de mi blog que describe todo y tiene un enlace al proyecto GitHub donde puede obtener el complemento.

Animado scrollintoview() jQuery plugin.

Answer 2

Desplazamiento suave utilizando requestAnimationFrame sobre una duración específica sin jQuery.

Demostración: http://codepen.io/Shadeness/pen/XXyvKG?editors=0010

window.bringIntoView_started = 0;
window.bringIntoView_ends = 0;
window.bringIntoView_y = 0;
window.bringIntoView_tick = function() {
  var distanceLeft, dt, duration, t, travel;
  t = Date.now();
  if (t < window.bringIntoView_ends) {
    dt = t - window.bringIntoView_started;
    duration = window.bringIntoView_ends - window.bringIntoView_started;
    distanceLeft = window.bringIntoView_y - document.body.scrollTop;
      travel = distanceLeft * (dt / duration);
      document.body.scrollTop += travel;
      window.requestAnimationFrame(window.bringIntoView_tick);
  } else {
    document.body.scrollTop = window.bringIntoView_y;
  }
};
window.bringIntoView = function(e, duration) {
  window.bringIntoView_started = Date.now();
  window.bringIntoView_ends = window.bringIntoView_started + duration;
  window.bringIntoView_y = Math.min(document.body.scrollTop + e.getBoundingClientRect().top, document.body.scrollHeight - window.innerHeight);
  window.requestAnimationFrame(window.bringIntoView_tick);
};

P.ej:

bringIntoView(document.querySelector(''#bottom''), 400)

Debería acelerarse a medida que dt (deltaTime) se hace más grande y se ralentiza a medida que se reduce la distanceLeft . Consideré romper el bucle si el usuario se desplazaba pero meh. Las variables globales impiden que la llamada anterior tome el control por completo, pero no cancela el ciclo recursivo anterior, por lo que se animará dos veces más rápido.

Answer 3

En la mayoría de los navegadores modernos ( Chrome y Firefox, pero no Safari, UC o IE ) puede pasar opciones en un objeto a .scrollIntoView() .

Prueba esto:

$(''html, body'').animate({
    scrollTop: $("#elementId").offset().top
}, 1000);

Otros valores son el behavior: ''instant'' o block: ''start'' o block: ''end'' . Ver https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView

Answer 4

Estaba buscando este problema también y encontré esta solución:

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

recurso: http://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/

Answer 5

Prueba esto:

function scroll_into_view_smooth(elem)
{   var FPS = 48; // frames per second
    var DURATION = 0.6; // sec
    var e = elem;
    var left = e.offsetLeft;
    var top = e.offsetTop;
    var width = e.offsetWidth;
    var height = e.offsetHeight;
    var body = document.body;
    var to_scroll = [];
    var p, offset;
    while ((p = e.offsetParent))
    {   var client_width = p.clientWidth;
        var client_height = p!=body ? p.clientHeight : Math.min(document.documentElement.clientHeight, window.innerHeight);
        if (client_width<p.scrollWidth-1 && ((offset=left-p.scrollLeft)<0 || (offset=left+width-p.scrollLeft-client_width)>0))
        {   to_scroll.push({elem: p, prop: ''scrollLeft'', from: p.scrollLeft, offset: offset});
        }
        if (client_height<p.scrollHeight-1 && ((offset=top-p.scrollTop)<0 || (offset=top+height-p.scrollTop-client_height)>0))
        {   to_scroll.push({elem: p, prop: ''scrollTop'', from: p.scrollTop, offset: offset});
        }
        e = p;
        left += e.offsetLeft;
        top += e.offsetTop;
    }
    var x = 0;
    function apply()
    {   x = Math.min(x+1/(DURATION * FPS), 1);
        for (var i=to_scroll.length-1; i>=0; i--)
        {   to_scroll[i].elem[to_scroll[i].prop] = to_scroll[i].from + to_scroll[i].offset*x*x;
        }
        if (x < 1)
        {   setTimeout(apply, 1000/FPS);
        }
    }
    apply();
}

Answer 6

Solo necesitas incluir este polyfill y funciona.

https://github.com/iamdustan/smoothscroll

<script src="js/smoothscroll.js"></script>

O solicítelo si usa npm.

require(''smoothscroll-polyfill'').polyfill();

Utilice el método scrollIntoView nativo.

document.getElementById(''parallax-group-logo'').scrollIntoView({
    block: "start",
    behavior: "smooth"
});

Answer 7

Tal vez no desee agregar jQuery solo para implementar esta característica. Elem es el elemento a desplazar. La pos de destino se puede tomar de la propiedad offsetTop del elemento que se moverá a la vista.

function Scroll_To(elem, pos)
{
    var y = elem.scrollTop;
    y += (pos - y) * 0.3;
    if (Math.abs(y-pos) < 2)
    {
        elem.scrollTop = pos;
        return;
    }
    elem.scrollTop = y;
    setTimeout(Scroll_To, 40, elem, pos);   
}