我有 3 个 Bootstrap 列，菜单列在左侧，容器列在中间，另一列在右侧。当我向下滚动中间列时，菜单项将通过使用 Bootstrap ScrollSpy 突出显示。
为了让滚动 spy 工作，我必须为中间列设置 overflow: auto;。没有这个属性，scroll spy 将无法工作!
问题:由于overflow: auto;，它在中间栏中显示了一个垂直导航栏。那看起来不太好。我尝试设置一些不同的属性，但没有成功。
如何隐藏中间栏的垂直导航栏？
请伸出援手。谢谢
sample 在 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>
最佳答案
将此添加到您的 css(不过我不确定这是否适用于所有浏览器)。
::-webkit-scrollbar {
display: none;
}
https://jsfiddle.net/L5kp4cde/
关于jquery - 引导滚动 spy : Hide the vertical navigation bar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56264232/