Merge pull request #415 from scouttyg/scroll-chat-fix

Fix bug where input would scroll when typing
kandanapp · Dec 13, 2014 · d6562c8 · d6562c8
2 parents 1e0665d + 7c366ed
commit d6562c8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/app/assets/javascripts/backbone/helpers/channels.js.coffee b/app/assets/javascripts/backbone/helpers/channels.js.coffee
@@ -20,13 +20,13 @@ class Kandan.Helpers.Channels
 
   @scrollToLatestMessage: (channelId) ->
     if channelId
-      theScrollArea = @channelPane(channelId)
+      theScrollArea = @channelPane(channelId).find(".paginated-activities")
       theScrollArea.scrollTop(theScrollArea.prop('scrollHeight'))
     else
-      $('.channels-pane').scrollTop($('.channels-pane').prop('scrollHeight'))
+      $('.paginated-activities').scrollTop($('.paginated-activities').prop('scrollHeight'))
 
   @currentScrollPosition: (channelId) ->
-    $('.channels-pane').scrollTop()
+    $('.paginated-activities').scrollTop()
 
   @channelPane: (channelId) ->
     $("#channels-#{channelId}")

diff --git a/app/assets/javascripts/backbone/views/channel_pane.js.coffee b/app/assets/javascripts/backbone/views/channel_pane.js.coffee
@@ -4,18 +4,19 @@ class Kandan.Views.ChannelPane extends Backbone.View
   render: (container) ->
     $container = $(container || @el)
     $container.html @paginatedActivitiesView()
+    $paginated_activities = $container.find(".paginated-activities")
 
     # Flag to avoid pulling new messages when we already requested new messages from the server
     @loading_new_messages = false
 
-    if !$container.hasScrollBar()
+    if !$paginated_activities.hasScrollBar()
       @loading_new_messages = true;
       @loadMoreActivities($container)
 
-    $container.bind 'scroll', =>
-      if $container.scrollTop() <= 100 && !@loading_new_messages
+    $paginated_activities.bind 'scroll', =>
+      if $paginated_activities.scrollTop() <= 100 && !@loading_new_messages
         @loading_new_messages = true
-        @loadMoreActivities($container)
+        @loadMoreActivities($paginated_activities)
       return
 
     $container.append @chatboxView()

diff --git a/app/assets/stylesheets/_chat_area.sass b/app/assets/stylesheets/_chat_area.sass
@@ -13,8 +13,10 @@
     height: 100%
     margin-right: 1px
     padding: 0 1px 0 0
-    overflow-y: auto
-    +has-scrollbar
+    .paginated-activities
+      height: 100%
+      overflow-y: auto
+      +has-scrollbar
 
     &.active
       display: block