jquery - 引导 ScrollSpy : Hide the vertical navigation bar

标签 jquery html css

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

为了让滚动 spy 工作,我必须设置 overflow: auto;为中间列。没有这个属性,滚动 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 - 引导 ScrollSpy : Hide the vertical navigation bar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56264232/

相关文章:

jquery - 如何检测使用Jqtouch敲击按钮的时间?

javascript - 如果在单击jquery事件中,clearInterval不起作用?

javascript - 如何检查查询字符串是否已存在

html - 改变 child 的特异性

javascript - 根据下拉菜单/表单值输入在网页上输出数据

html - 使用 CSS 调整和裁剪图像

javascript - 发生溢出时如何自动向上滚动文本?

ios - 固定定位元素在页面卸载时消失

javascript - 如何将 html 实体与 jQuery 进行比较

javascript - 如何使一个元素跨越 React Table 中的整个单元格