scrollable_list.js

window.init_scrollbars = (pane, scrollbar) ->
  content = pane.find(".conversation-scroll-content")
  if pane.height() >  content.height()
    scrollbar.css("opacity", "0.3")
  else
    scrollbar_height = scrollbar.parent().height() - scrollbar.height()
    scrollbar.draggable({
      containment: "parent",
      axis: 'y',
      drag: (event, ui) ->
        margin = (pane.height() - content.height()) * (ui.position.top / scrollbar_height)
        content.css("margin-top", margin + "px")
    })  
    pane.on('mousewheel', (event, delta) ->
      event.preventDefault()
      max = scrollbar_height
      min = 0
      step = pane.find('.conversation-item').outerHeight()
      step_scroll = max / (content.height() / step)
      scroll_position = scrollbar.position().top

      if delta > 0 &&  scroll_position > min
        if scroll_position - step_scroll < min then top = min else top = scroll_position - step_scroll
      
      if delta < 0 &&  scroll_position < max 
        if scroll_position + step_scroll > max then top = max else top = scroll_position + step_scroll

      margin = (pane.height() - content.height()) * (top / scrollbar_height)
      content.css("margin-top", margin + "px")
      scrollbar.css("top", top + "px")
    )