如何在 Bootstrap 模式上仅隐藏滚动条拇指？答案

【问题标题】：How to hide only scrollbar thumb on Bootsrap modal?如何在 Bootstrap 模式上仅隐藏滚动条拇指？
【发布时间】：2019-12-05 15:26:23
【问题描述】：

在引导程序docs 上，当您打开modal 时，它只会隐藏scrollbar thumb。

但是我的modal 隐藏了整个滚动条。我怎样才能像示例一样只隐藏scrollbar thumb？

body {
  height: 1200px;
}

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

【问题讨论】：

只是你想要滚动条轨道而不是拇指我是对的吗？

标签： jquery css twitter-bootstrap bootstrap-4 bootstrap-modal

【解决方案1】：

它已经在您的演示中工作，如果您检查它，您会在打开模式时在正文中找到padding-right: 17px

模态的作用是：隐藏溢出，这样就不会显示滚动条。并添加 17px 的右填充（滚动条的宽度）。

诀窍在于引导网站的右侧有另一个滚动条。所以你会认为有滚动条没有拇指，但实际上根本没有滚动条，只有padding-right

有一些解决方法是在打开模式时添加条，定位在滚动条的同一位置。通过使用 jquery 和 bootstrap modal (See the link) 提供的事件

$("#exampleModalCenter").on("show.bs.modal", function() {
  $(".scroll").addClass("show")
});
$("#exampleModalCenter").on("hidden.bs.modal", function() {
  $(".scroll").removeClass("show")
});

body {
  position: relative;
  height: 1200px
}
.scroll {
display: none;
}
.scroll.show { 
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 17px;
background-color: #f1f1f1;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>
<div class="scroll"></div>


<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

【讨论】：

有没有什么简单的方法可以在右边不用另一个滚动条的情况下达到同样的效果？
@SilverSurfer 我已经更新了答案，你可以查看解决方案