Home/ Questions/Q 8877201
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T19:24:21+00:00

I have a stack of ‘pages’ that I’m trying to move on mousewheel, such

  • 0

I have a stack of ‘pages’ that I’m trying to move on mousewheel, such that the top one moves more than the one underneath it, etc. They’re position: absolute, and currently I’m adjusting the CSS top to move them around, but it is veeery slow and janky.

EDIT: took down demo, problem solved.

Relevant code:

window.onScroll = (e, delta) ->
    e.preventDefault()

    minHeight = 5
    maxHeight = 800
    top_scale = 50
    second_scale = 5
    third_scale = 1
    stack = $('.card_stack').first().children()
    top = $(stack[stack.length - 1])
    second = $(stack[stack.length - 2])
    third = $(stack[stack.length - 3])

    for pair in [[top, top_scale], [second, second_scale], [third, third_scale]]
        pair[0].css('top', parseInt(pair[0].css('top'), 10) + delta*pair[1] + 'px')

$(window).mousewheel(window.onScroll)   # jQuery mousewheel plugin

I tried looking at this in the Frames tab of Chrome to figure out what’s so slow, and got this: https://dl.dropbox.com/u/407870/static/Screen%20Shot%202012-11-20%20at%201.44.33%20PM.png

It looks like there’s not really much going on, but maybe I’m missing something. A previous, unanswered question related to the Frames problem I’m having: Web inspector profiling with "Frames": finding the cause of performance problems when nothing appears in the timeline

I know there are a bunch of other things that should be cleaned up before any kind of release (eg, I’m compiling Less and Coffeescript in-page) but the scrolling is my current concern, as it is central to my premise.

How can I best speed this up?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok I think I identified the problem (my dear Watson). It doesn’t comes from the scroll event but more on what you do with it.
    If you check the frames you have a painting that takes 70ms. That’s because you use heavy css3 rules like box-shadows. If you remove it you will have only 7ms of painting ! (so 10x performance).

    As a general rule try to avoid using css3 properties on animated elements (cause they are heavy to render for the browser !).

    You can have a look at this Google I/O 2012 conference about this particular problem and how to solve it : https://www.youtube.com/watch?v=hAzhayTnhEI

    • 0