Bootstrap ScrollSpy：隐藏垂直导航栏答案

【问题标题】：Bootstrap ScrollSpy: Hide the vertical navigation barBootstrap ScrollSpy：隐藏垂直导航栏
【发布时间】：2019-11-06 16:25:26
【问题描述】：

我有 3 个 Bootstrap 列，左侧是菜单列，中间是容器列，右侧是另一列。当我向下滚动中间列时，将使用 Bootstrap ScrollSpy 突出显示菜单项。

为了让滚动间谍工作，我必须为中间列设置overflow: auto;。没有这个属性，scroll spy 将无法工作！

问题：因为overflow: auto;，中间一栏显示垂直导航栏。那看起来不太好。我尝试设置一些不同的属性，但没有成功。

如何隐藏中间一栏的垂直导航栏？

请帮忙。谢谢

jsfiddle 中的示例

CSS

.scrollspy-example {
  position: relative;
  height: 100vh;
  overflow: auto;
}
#spy {
  position: fixed;
}
.right-side {
  background: gray;
  height: 120px;
}

HTML

<body>
<div class="row">
<div class="col-sm-3">
<div  id="spy">
  <ul class="nav nav-pills flex-column">
    <li class="nav-item"><a class="nav-link active" href="#scroll1">First Section</a></li>
    <li class="nav-item"><a class="nav-link" href="#scroll2">Second Section</a></li>
    <li class="nav-item"><a class="nav-link" href="#scroll3">Third Section</a></li>
    <li class="nav-item"><a class="nav-link" href="#scroll4">Fourth Section</a></li>
  </ul>
  </div>
</div>
<div class="col-sm-7 scrollspy-example" data-spy="scroll" data-target="#spy">
  <div id="scroll1">
    <h2>First Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div id="scroll2">
    <h2>Second Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div id="scroll3">
    <h2>Third Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div id="scroll4">
    <h2>Fourth Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
</div>
<div class="col-sm-2">
  <div class="right-side">

  </div>
</div>
</div>
</body>

【问题讨论】：

我在你的小提琴中没有看到垂直导航栏。重用代码时也看不到它。您能否提供更多详细信息。
对不起，这是一个错误的网址！刚刚更新了我的问题。请看jsfiddle.net/6ysnjoa8谢谢

标签： jquery html css

【解决方案1】：

将此添加到您的 CSS（不过我不确定这是否适用于所有浏览器）。

::-webkit-scrollbar {
    display: none;
}

https://jsfiddle.net/L5kp4cde/

【讨论】：

您好 shaoe2020，非常感谢！ ::-webkit-scrollbar 是否适用于跨浏览器？
我认为它在 Firefox 中不起作用，并且可能在边缘中不起作用。您可能仍然需要解决这些问题。有一些 jquery 滚动条插件，您可以 google 并查看。