scroll - scrollintoviewアニメーション

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の代わりに動的に実行する必要があります。何か案は？ありがとう。

score 122 · Accepted Answer

最近のほとんどのブラウザー ( Chrome と Firefox。Safari、UC、または IE は除く) では、オブジェクトのオプションをに渡すことができます.scrollIntoView()。

これを試して：

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

その他の値はbehavior: 'instant'またはblock: 'start'またはblock: 'end'です。https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoViewを参照してください

score 15 · Accepted Answer

この機能を実装するためだけに jQuery を追加したくないかもしれません。elem はスクロールする要素です。移動先の位置は、ビューに移動する要素の offsetTop プロパティから取得できます。

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

score 7 · Accepted Answer

requestAnimationFramejQuery を使用せずに特定の期間を使用してスムーズにスクロールします。

デモ: 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);
};

例えば：

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

(deltaTime) が大きくなると速くなり、 get が小さくdtなると遅くなります。distanceLeftユーザーがスクロールした場合、ループを壊すことを検討しましたが、まあ。グローバル変数は、前の呼び出しが完全に引き継がれるのを防ぎますが、前の再帰ループをキャンセルしないため、2 倍の速さでアニメーション化されます。

score 0 · Accepted Answer

関数に evt.preventDefault() を追加してみてください。これは、通常の「リンクをクリック」機能をオーバーライドする必要があります。例：

    // Scroll to anchor ID using scrollTO event
function linkClicked(evt) { // function to listen for when a link is clicked
  evt.preventDefault();
  evt.scrollIntoView({behavior: 'smooth'});

}

// Scroll to section on link click
navBar.addEventListener('click', linkClicked);

scroll - scrollintoviewアニメーション

8 に答える 8

Related

Reference