jQueryとkaminariを使った無限スクロールの実装について

こちらの記事を参考に無限スクロールを
実装しようとしているのですが

JS　jQuery
1 // 無限スクロール
2  $(document).on('turbolinks:load',function(){
3    
4    $('#infiniteScrollingContainer').on('scroll', function(){
5      
6      if ($('#infiniteScrollingContainer').scrollTop() + $('#infiniteScrollingContainer').height() == $('#infiniteScrollingContainer')[0].scrollHeight ) { 
7      alert("最後までスクロールしました！")
8      }
9    })
10  });

こちらが発火せず困っています。

#infiniteScrollingContainer

このidは

<div class="comments-all" id="infiniteScrollingContainer">

	<div class="container">
		<div class="row">
			<% @comments.each do |comment| %>
			<div class="col-md-6 ">
				<div class="card-comment mb-4 shadow-sm">
					<div class="row">
						<div class="blank col-md-3 col-xs-4 col-sm-2"></div>
						<div class="comment-image col-md-6 col-xs-4 col-sm-6" style="text-align: center;">
							<%= image_tag(@image[comment.item_code].present? ? @image[comment.item_code] : "/assets/no_image.jpg", style: "width: 180px;height: 160px; margin-right: 0;" ) %>
						</div>
						<div class="blank col-md-3 col-xs-4 col-sm-2"></div>
					</div>
					<div class="comment-item-name col-xs-12 ">
						<%= @name[comment.item_code].present? ? @name[comment.item_code] : "商品名がありません" %>
					</div>
					<div class="row">
						<a class="kutikominaiyou">口コミ内容</a>
						<div class="comment-areas mx-auto border col-md-10">
							<%= comment.content %>
						</div>
					</div>
					<div class="row">
						<div class="comment-avatar col-md-10 col-sm-10 col-xs-10">
							<div class="row">
								<div class="comment_index_avatar col-md-5 col-sm-5 col-xs-5">
									<%= link_to(comment.user) do %>
									<%= attachment_image_tag comment.user, :profile_image,  size:'110x110', format: 'jpeg', class: "img-circle pull-left profile-thumb", fallback: "no_image.jpg" , size:'110x110' %>
									<% end %>
								</div>
								<div class="comment-author col-md-5 col-sm-5 col-xs-5">
									<%= link_to comment.user.name,user_path(id: "comment.user_id") %>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<div class="row">
								<div class="comment-date col-md-7 col-sm-7 col-xs-7">
									<span class="comment-date">
										<a>コメント投稿日：</a>
										<%= comment.created_at.strftime('%Y/%m/%d') %></span>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<div class="row">
								<div class="new-comment col-md-8 col-sm-8 col-xs-8">
									<% if comment.item_code.present? %>
									<%= link_to "口コミを投稿する",chocolate_path(:id => comment.item_code), class: "btn btn-outline-dark" %>
									<% else %>
									<%= link_to '在庫切れ', home_sorry_path, class: "btn btn-outline-dark"%>
									<% end %>
								</div>
								<div class="comment-destroy col-md-4 col-sm-4 col-xs-4">
									<% unless current_user != comment.user %>
									<%= link_to comments_path(comment.id), method: :delete, remote: true  do %>
									<button class="btn btn-danger btn-sm comment-delete">コメント削除</button>
									<% end %>
									<% end %>
								</div>
							</div>
						</div>
					</div>
				</div> <%#カードの締め%>
			</div>
			<% end %>
		</div>
	</div>

<%= paginate @comments, class: "paginate" %>
</div>

先頭のdivに付けています。

どなたかアドバイスいただけると幸いです。