Question

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

为了使滚动间谍工作，我必须为中间的列设置overflow: auto;。没有此属性，滚动间谍将无法工作！

问题：由于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>

Answer 1

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

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

https://jsfiddle.net/L5kp4cde/

Boostrap ScrollSpy：隐藏垂直导航栏

1 个答案: