No me robes el Scroll!

No me robes el Scroll!

Viste cuando scrolleas y anda todo re lento? Bueno, muchas veces por ser cool y hacer un montón de cosas en el scroll penalizamos al usuario y su experiencia sin darnos cuenta. Por eso, les quiero compartir una técnica para evitar esto y tener UIs mucho más performantes.

F8a70e01eddbadc5e4f9876ff34494fa?s=128

Guille Paz

July 14, 2016
Tweet

Transcript

  1. 2.
  2. 7.

    • Headers Fixed • Parallax Scrolling • History API •

    Custom Scrolls • Position Fixed • Hover on Scroll (Chrome NO!) • Juan Vanni <3
  3. 10.

    “It’s a very, very, bad idea to attach handlers to

    the window scroll event.” by John Resig
  4. 14.

    function decouple(node, fn) { var eve, tracking = false; function

    captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve); tracking = false; } node.addEventListener('scroll', captureScroll, false); }
  5. 15.

    function decouple(node, fn) { var eve, tracking = false; function

    captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve); tracking = false; } node.addEventListener('scroll', captureScroll, false); }
  6. 16.

    function decouple(node, fn) { var eve, tracking = false; function

    captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve); tracking = false;
  7. 17.

    function decouple(node, fn) { var eve, tracking = false; function

    captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve);
  8. 18.

    function decouple(node, fn) { var eve, tracking = false; function

    captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve); tracking = false; }
  9. 19.

    function decouple(node, fn) { var eve, tracking = false; function

    captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve); tracking = false; } node.addEventListener('scroll', captureScroll, false); } function foo(eve) { console.log(eve); console.log(this.scrollTop); } var nodeBox = $$.querySelector('#box'); decouple(nodeBox, foo);
  10. 20.

    function decouple(node, fn) { var eve, tracking = false; function

    captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve); tracking = false; } node.addEventListener('scroll', captureScroll, false); }
  11. 25.
  12. 29.