Merge pull request #769 from poanetwork/690-live-update-scroll

Maintain scroll position in lists during live update

apps/block_scout_web/assets/js/pages/address.js

@@ -3,7 +3,7 @@ import URI from 'urijs'
 import humps from 'humps'
 import numeral from 'numeral'
 import socket from '../socket'
-import { batchChannel, initRedux } from '../utils'
+import { batchChannel, initRedux, prependWithClingBottom } from '../utils'
 import { updateAllAges } from '../lib/from_now'
 import { updateAllCalculatedUsdValues } from '../lib/currency.js'
 import { loadTokenBalanceDropdown } from '../lib/token_balance_dropdown'
@@ -152,11 +152,11 @@ if ($addressDetailsPage.length) {
         $channelBatching.hide()
       }
       if (oldState.newInternalTransactions !== state.newInternalTransactions && $internalTransactionsList.length) {
-        $internalTransactionsList.prepend(state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join(''))
+        prependWithClingBottom($internalTransactionsList, state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join(''))
         updateAllAges()
       }
       if (oldState.newTransactions !== state.newTransactions && $transactionsList.length) {
-        $transactionsList.prepend(state.newTransactions.slice(oldState.newTransactions.length).reverse().join(''))
+        prependWithClingBottom($transactionsList, state.newTransactions.slice(oldState.newTransactions.length).reverse().join(''))
         updateAllAges()
       }
     }

apps/block_scout_web/assets/js/pages/block.js

@@ -3,7 +3,7 @@ import URI from 'urijs'
 import humps from 'humps'
 import socket from '../socket'
 import { updateAllAges } from '../lib/from_now'
-import { initRedux } from '../utils'
+import { initRedux, prependWithClingBottom } from '../utils'
 
 export const initialState = {
   beyondPageOne: null,
@@ -58,7 +58,7 @@ if ($blockListPage.length) {
 
       if (state.channelDisconnected) $channelDisconnected.show()
       if (oldState.newBlock !== state.newBlock) {
-        $blocksList.prepend(state.newBlock)
+        prependWithClingBottom($blocksList, state.newBlock)
         updateAllAges()
       }
     }

apps/block_scout_web/assets/js/pages/transaction.js

@@ -4,7 +4,7 @@ import humps from 'humps'
 import numeral from 'numeral'
 import socket from '../socket'
 import { updateAllAges } from '../lib/from_now'
-import { batchChannel, initRedux } from '../utils'
+import { batchChannel, initRedux, prependWithClingBottom } from '../utils'
 
 const BATCH_THRESHOLD = 10
 
@@ -125,7 +125,7 @@ if ($transactionListPage.length) {
           .children()
           .slice($transactionsList.children().length - newTransactionsToInsert.length, $transactionsList.children().length)
           .remove()
-        $transactionsList.prepend(newTransactionsToInsert.reverse().join(''))
+        prependWithClingBottom($transactionsList, newTransactionsToInsert.reverse().join(''))
 
         updateAllAges()
       }

apps/block_scout_web/assets/js/utils.js

@@ -1,3 +1,4 @@
+import $ from 'jquery'
 import _ from 'lodash'
 import { createStore } from 'redux'
 
@@ -32,3 +33,42 @@ export function initRedux (reducer, { main, render, debug } = {}) {
   }
   if (main) main(store)
 }
+
+export function prependWithClingBottom ($el, content) {
+  function userAtTop () {
+    return window.scrollY < $('[data-selector="navbar"]').outerHeight()
+  }
+  if (userAtTop()) return $el.prepend(content)
+
+  let isAnimating
+  function setIsAnimating () {
+    isAnimating = true
+  }
+  $el.on('animationstart', setIsAnimating)
+
+  let startingScrollPosition = window.scrollY
+  let endingScrollPosition = window.scrollY
+  function userIsScrolling () {
+    return window.scrollY < startingScrollPosition || endingScrollPosition < window.scrollY
+  }
+
+  const clingDistanceFromBottom = document.body.scrollHeight - window.scrollY
+  let clingBottomLoop = window.requestAnimationFrame(function clingBottom () {
+    if (userIsScrolling()) return stopClinging()
+
+    startingScrollPosition = window.scrollY
+    endingScrollPosition = document.body.scrollHeight - clingDistanceFromBottom
+    $(window).scrollTop(endingScrollPosition)
+    clingBottomLoop = window.requestAnimationFrame(clingBottom)
+  })
+
+  function stopClinging () {
+    window.cancelAnimationFrame(clingBottomLoop)
+    $el.off('animationstart', setIsAnimating)
+    $el.off('animationend animationcancel', stopClinging)
+  }
+  $el.on('animationend animationcancel', stopClinging)
+  setTimeout(() => !isAnimating && stopClinging(), 100)
+
+  return $el.prepend(content)
+}

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-dark navbar-expand-lg navbar-primary">
+<nav class="navbar navbar-dark navbar-expand-lg navbar-primary" data-selector="navbar">
   <div class="container">
     <%= link to: chain_path(@conn, :show), class: "navbar-brand", "data-test": "header_logo" do %>
       <img class="navbar-logo" src="<%= Application.get_env(:block_scout_web, BlockScoutWeb.Chain)[:logo] %>" />