Question

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

由于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。然而，由于我的标题占用了很多空间，而且左边有一些内容，我也会为我的身体获得滚动条。

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

我只希望带有信息的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/

使用带有2个滚动条的Scrollspy

1 个答案: