       "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>

    @_getStateFromStores()

  componentDidMount: ->
    @_unsubscribers = []
    @_unsubscribers.push MessageStore.listen @_onChange
    @_unsubscribers.push ThreadStore.listen @_onChange

          participants[contact.email] = contact
    return _.values(participants)

  _onResize: (event) ->
    return unless @isMounted()
    @_scrollToBottom() if @_wasAtBottom()
    @_cacheScrollPos()

  _scrollToBottom: ->
    messageWrap = @refs.messageWrap?.getDOMNode()
    messageWrap.scrollTop = messageWrap.scrollHeight

  _cacheScrollPos: ->
    messageWrap = @refs.messageWrap?.getDOMNode()
    @_lastScrollTop = messageWrap.scrollTop
    @_lastHeight = messageWrap.getBoundingClientRect().height
    @_lastScrollHeight = messageWrap.scrollHeight

  _wasAtBottom: ->
    (@_lastScrollTop + @_lastHeight) >= @_lastScrollHeight

MessageList.minWidth = 500
MessageList.maxWidth = 900
