       "ready": @state.ready
 
     <div className="message-list" id="message-list">
-      <div tabIndex="-1" className={wrapClass} ref="messageWrap">
+      <div tabIndex="-1"
+           className={wrapClass}
+           onScroll={_.debounce(@_cacheScrollPos, 100)}
+           ref="messageWrap">
         <div className="message-list-notification-bars">
           {@_messageListNotificationBars()}
         </div>


  componentWillUnmount: ->
    unsubscribe() for unsubscribe in @_unsubscribers

  shouldComponentUpdate: (nextProps, nextState) ->
    not _.isEqual(nextProps, @props) or not _.isEqual(nextState, @state)

  componentDidUpdate: (prevProps, prevState) ->
    didLoad = prevState.loading and not @state.loading

    oldDraftIds = _.map(_.filter((prevState.messages ? []), (m) -> m.draft), (m) -> m.id)
    newDraftIds = _.map(_.filter((@state.messages ? []), (m) -> m.draft), (m) -> m.id)
    addedDraftIds = _.difference(newDraftIds, oldDraftIds)
    didAddDraft = addedDraftIds.length > 0

    if didLoad
      @_prepareContentForDisplay()

    else if didAddDraft
      @_focusDraft(@refs["composerItem-#{addedDraftIds[0]}"])
      @_prepareContentForDisplay()

  _focusDraft: (draftDOMNode) ->
    # We need a 100ms delay so the DOM can finish painting the elements on

    @_getStateFromStores()

  componentDidMount: ->
    @__onResize = _.bind @_onResize, @
    window.addEventListener("resize", @__onResize)
    @_unsubscribers = []
    @_unsubscribers.push MessageStore.listen @_onChange
    @_unsubscribers.push ThreadStore.listen @_onChange
