使用 Rails .each 循环的 Jquery 自定义滚动答案

【问题标题】：Jquery Custom Scroll with Rails .each Loop使用 Rails .each 循环的 Jquery 自定义滚动
【发布时间】：2017-05-23 03:24:00
【问题描述】：

尝试制作一个自定义滚动条，让我可以上下滚动所有使用 .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>

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;
}

messengerscroll.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 开发者 - 控制台

【问题讨论】：

你用的是什么浏览器？在 Chrome（显示开发人员面板）中，将鼠标悬停在元素上以查看其尺寸。我觉得$sliderHeight = $sHeight/$bHeight*100; 或$('.slider').height($sliderHeight+'%'); 很时髦。
@jvillian 谢谢你的建议——你说得对，它部分在$sliderHeight = $sHeight/$bHeight*100; 上，另一部分是我应该把 .content 换成 .containermessanger。

标签： javascript jquery css ruby-on-rails ruby-on-rails-5

【解决方案1】：

所以在@jvillian 的帮助下，我能够拼凑出一个行之有效的解决方案。解决这个问题的方法有两个。

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

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

【讨论】：