javascript - Jquery Custom Scroll with Rails .each 循环

Question

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

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>

application.scss

.containermessanger{
  overflow:hidden;
  margin: 0;
  height: 500px;
  position:relative;
}
.scrollBar{
  background: #49505a;
  position: absolute;
  right: 9px;
  width: 5px;
  height: 100%;
  z-index: 1;
  top:0;
}
.slider{
  background: #5EAEE3;
  width: 20px;
  border-radius:10px;
  left:-7px;
}

.scroll{
  height: 100%;
  overflow: hidden;
}

信使滚动

$(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 开发者 - 控制台

Answer 1

因此，在@jvillian 的帮助下，我能够拼凑出一个有效的解决方案。解决此问题的方法有两个。

第 1 步。 切换自: $bHeight = $(".content").height(); 到: $bHeight = $(".containermessanger").height();

第 2 步。 修改方程式: $sliderHeight = $sHeight/$bHeight*100; 到: $sliderHeight = $sHeight/$bHeight*20;