Javascript 带Rails的Jquery自定义滚动条。每个循环

尝试创建一个自定义滚动条，允许我上下滚动使用.each循环填充的所有框。我能够使灰色滚动条出现，但蓝色滑块不显示。我在下面列出了我所有的相关代码

show.html.erb

<div class="containermessanger">
  <div class="scrollBar">
      <div class="slider"></div>
  </div>
  <div class="scroll">
    <div class="content">
      <% @chatroomall.each do |chatroom|%>
        <div class="boxmessenger">
          <div class="row">
            <div class="col-md-2">
              <% if chatroom.messages.empty? %>
                No messages in this chatroom
              <% else %>
                <%= image_tag chatroom.messages.last.user.avatar.url(:thumb), id: "round-image-50"  %>
              <% end %>
            </div>
            <div class="col-md-8">
              <%= chatroom.name %>
            </div>
            <div class="col-md-2">                                  
              <%= chatroom.messages.last(1).pluck(:created_at) %>
              <br>                            
              <li class="btn-group" id="profilenavbig">
                <a class="dropdown-toggle" type="button" data-behavior="notifications-link" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left: 0%;">
                  <i class="fa fa-cog" aria-hidden="true"></i>                            
                </a>         
                <ul class="dropdown-menu">
                  <li> 
                    <i class="fa fa-trash" aria-hidden="true"></i>&nbspDelete                   
                  </li>
                  <li role="separator" class="divider">
                  </li>                                           
                  <li>
                    Report Spam<br>or Abuse 
                  </li>                                                                   
                </ul>
              </li>
            </div>
          </div>
          <div class="row">
            <div class="col-md-1">
            </div>
            <div class="col-md-11">                                                 
              <%= chatroom.messages.last(1).pluck(:body) %>                           
            </div>
          </div>                      
        </div>
      <% end %>
    </div>
  </div>
</div>

Messenger.js

$(document).ready(function(){
  $bHeight = $(".content").height();
  $sHeight = $('.scrollBar').height();
  $sliderHeight = $sHeight/$bHeight*100;
  $('.slider').height($sliderHeight+'%');
  $('.slider').draggable({
    containment:'parent',
    axis:'y',
    drag:function(){
      $pos = $('.slider').position().top;
      $ScrollPercent = $pos/$sHeight*100;
      $ScrollPx = $ScrollPercent/100*$bHeight;
      $('.scroll').scrollTop($ScrollPx);
    }
  })
});

Chrome开发者-HTML元素页面

Chrome开发者-控制台

---

因此，在@jvillian的帮助下，我找到了一个行之有效的解决方案。解决这个问题的方法有两个方面

第1步。 切换至： $bHeight=$（“.content”）.height（）； 致： $bHeight=$（“.containerMessager”）.height（）

第2步。 根据以下公式修改公式： $sliderHeight=$sHeight/$bHeight*100； 致： $sliderHeight=$sHeight/$bHeight*20；

---

您使用的浏览器是什么？在Chrome中（显示开发者面板），将鼠标悬停在元素上，查看其尺寸。我有一种感觉，

$sliderHeight=$sHeight/$bHeight*100或
$（'.slider'）。高度（$sliderHeight+'%'）
很时髦。@jvillian谢谢你的建议-你是对的，部分是在
$sliderHeight=$sHeight/$BHHeight*100另一部分是我应该为.containerMessager切换.content。