Grabber/a.py

## a.py
import math
import random

elt_offsets = []
elts = ['a', 'b', 'c', 'd']
m = 176

mx = 0

# pre-render, best height approximation

for elt in elts:
  print(elt, mx)
  elt_offsets.append(mx)
  mx += m

print('elt_offsets', elt_offsets, sum(elt_offsets))

# post-render, exact height
elts2_offsets = []

for offset in elt_offsets:
  # delta = 100
  delta = 176 - 176
  # delta = random.randint(m,3*m) - m
  x = offset + delta
  elts2_offsets.append(x)
  print(x, delta)

print('elts2_offsets', elts2_offsets, sum(elts2_offsets))

# print('comparasion', sum(elt_offsets),sum(elts2_offsets))
print('diff', sum(elts2_offsets) - sum(elt_offsets))

for k,v in enumerate(elts2_offsets):
  print('between offset', k, v - elt_offsets[k])

print("----------")
z = 0

for w in range(0, len(elts)):
  ## quanto o tamanho é fixo...
  def a():
    window = w*m
    scroll = z*m # scrollTop
    idxt = scroll / m
    idxh = (scroll + window) / m

    print(w, 'fixo', 'window', window, 'scroll', scroll,
                     'idxt', idxt, 'idxh', idxh)
  a()

  # quando o tamanho é variável...
  window = w*m # somente como referência

  # print(1, elts2_offsets[:z+1])

  scroll = sum(elts2_offsets[:z]) # scrollTop

  st = 0
  idxt = 0

  while (st < scroll):
    st += elts2_offsets[idxt]
    idxt += 1
  print('idxt', idxt)

  sh = 0
  idxh = 0

  while (sh < (scroll + window)):
    idxh += 1
    sh += elts2_offsets[idxh]
  print('idxh', idxh)

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
  <div id="a">#a,1</div>
  <div id="b">#b,2</div>
  <div id="c">#c,3</div>

  <style type="text/css">
    :root {
      --h: 40px;
    }

    #a {
      background-color: red;
      transform: translateY(calc(1*var(--h)));
      height: var(--h);
    }
    #b {
      background-color: green;
       transform: translateY(calc(1*var(--h)));
      height: var(--h);
    }
    #c {
      background-color: yellow;
       transform: translateY(calc(1*var(--h)));
      height: var(--h);
    }
  </style>
</body>
</html>
	import math
	import random

	elt_offsets = []
	elts = ['a', 'b', 'c', 'd']
	m = 176

	mx = 0

	# pre-render, best height approximation

	for elt in elts:
	print(elt, mx)
	elt_offsets.append(mx)
	mx += m

	print('elt_offsets', elt_offsets, sum(elt_offsets))

	# post-render, exact height
	elts2_offsets = []

	for offset in elt_offsets:
	# delta = 100
	delta = 176 - 176
	# delta = random.randint(m,3*m) - m
	x = offset + delta
	elts2_offsets.append(x)
	print(x, delta)

	print('elts2_offsets', elts2_offsets, sum(elts2_offsets))

	# print('comparasion', sum(elt_offsets),sum(elts2_offsets))
	print('diff', sum(elts2_offsets) - sum(elt_offsets))

	for k,v in enumerate(elts2_offsets):
	print('between offset', k, v - elt_offsets[k])

	print("----------")
	z = 0

	for w in range(0, len(elts)):
	## quanto o tamanho é fixo...
	def a():
	window = w*m
	scroll = z*m # scrollTop
	idxt = scroll / m
	idxh = (scroll + window) / m

	print(w, 'fixo', 'window', window, 'scroll', scroll,
	'idxt', idxt, 'idxh', idxh)
	a()

	# quando o tamanho é variável...
	window = w*m # somente como referência

	# print(1, elts2_offsets[:z+1])

	scroll = sum(elts2_offsets[:z]) # scrollTop

	st = 0
	idxt = 0

	while (st < scroll):
	st += elts2_offsets[idxt]
	idxt += 1
	print('idxt', idxt)

	sh = 0
	idxh = 0

	while (sh < (scroll + window)):
	idxh += 1
	sh += elts2_offsets[idxh]
	print('idxh', idxh)
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	</head>
	<body>
	<div id="a">#a,1</div>
	<div id="b">#b,2</div>
	<div id="c">#c,3</div>

	<style type="text/css">
	:root {
	--h: 40px;
	}

	#a {
	background-color: red;
	transform: translateY(calc(1*var(--h)));
	height: var(--h);
	}
	#b {
	background-color: green;
	transform: translateY(calc(1*var(--h)));
	height: var(--h);
	}
	#c {
	background-color: yellow;
	transform: translateY(calc(1*var(--h)));
	height: var(--h);
	}
	</style>
	</body>
	</html>