使用带有 2 个滚动条的 Scrollspy

Question

我正在尝试使用 Bootstrap 中的 Scrollspy。指令似乎很简单。但是我遇到了问题：

https://jsfiddle.net/2cerpabp/

由于 Stackoverflow 需要它，这里是“代码”：

<!-- Header -->
<div class="HeaderContent col-md-12" style="height:300px;">
Header
</div>
<hr>

<!-- Left Side-->
<div class="col-xs-6">
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
</div>

<!-- Right Side -->

<div class="col-xs-6" style="height:400px;overflow:auto;" data-spy="scroll" data-target="#nav-sidebar">
    <div style="width:40px;position:fixed;">
        <ul class="nav nav-pills" id="nav-sidebar">
            <li role="presentation" class="active"><a href="#nav-side-view-history"><i
                class="fa fa-circle"></i></a></li>
            <li role="presentation"><a href="#nav-side-view-addresses"><i
                class="fa fa-user"></i></a></li>
            <li role="presentation"><a href="#nav-side-view-map"><i class="fa fa-map"></i></a>
            </li>
            <li role="presentation"><a href="#nav-side-view-info"><i
                class="fa fa-info"></i></a></li>
            <li role="presentation"><a href="#nav-side-view-texts"><i
                class="fa fa-align-left"></i></a></li>

        </ul>
    </div>

    <div>
        <div id="nav-side-view-history">
            <h4>
                History
            </h4>
            <p>History Text</p>
        </div>

        <hr>
        <div id="nav-side-view-map">
            <h4>
                Map
            </h4>
            <p>Map</p>
        </div>

        <hr>
        <div id="nav-side-view-addresses">
            <h4>
                Addresses
            </h4>
            <p>Addresses</p>
        </div>
        <hr>
        <div id="nav-side-view-info">
            <h4>Info</h4>
            <p>Info/p>
        </div>
        <hr>
        <div id="nav-side-view-texts">
            <h4>Texts</h4>
            <p>Texts</p>
        </div>
        <hr>
    </div>
    <div style="height:400px;">

    </div>

</div>

看到问题是我只想要一个小 div 来使用右侧的 Scrollspy。但是，由于我的标题占用了太多空间并且左侧有一些内容，所以我的正文也有滚动条。

现在当我点击“地图”图标时，它应该滚动到地图部分。它做到了，但也滚动整个页面。

我只希望带有信息的 div 执行此操作。此外，它不会在单击后突出显示正确的图标。

Answer 1

首先，可以使用简单的 CSS 隐藏带有滚动条的 Body 标签

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

其次，点击右图标后突出显示它只是在 li 标签中设置一个类（活动）的问题。这可以使用 jQuery 来实现，如下所示。

$('#nav-sidebar li').click(function() {
  $('#nav-sidebar li').removeClass("active");
  $(this).addClass("active");
});

您可以在下面的链接中找到完整的解决方案

https://jsfiddle.net/YasirKamdar/vmhskqj4/